今天在群組裡看到一個需求，啊這種三角形缺角怎麼做啊，還帶半透明陰影的。
要實現這個，可以用css做三角，網路找一下程式碼，像這樣。
因為以前沒有試過border能不能帶透明，所以需要試驗一下。
那麼去試驗下，red能不能用rgba去替換，如果可以的話那就成功一半了。
簡單試驗下，居然可以。
.sanjiao
{
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid rgba(0,0,0,.5);
};
那麼接下來就是在陰影的三角形裡插入一個白色的略小一點的三角形就可以了。
實作
<div style="background: url(http://uploads.xuexila.com/allimg/1608/704-160P9224Z4.jpg);
width: 900px; height: 300px; padding-top: 20px;" class="bg">
<div class="sanjiao">
<div class="sanjiaobai">
</div>
</div>
</div>
<style>
.sanjiao
{
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid rgba(0,0,0,.5);
border-left: 100px solid transparent;
}
.sanjiaobai
{
position: absolute;
right: 0;
top: 20px;
width: 0;
height: 0;
border-bottom: 80px solid #fff;
border-left: 80px solid transparent;
}
</style>
至此就完成了這個缺角還帶陰影的div了，至於右側填充一個白色的div，還有下面正常矩形div就不再這裡實現了。
