網頁中三角切邊還半透明，現在的設計師越來越牛，css也要跟上啊

需求

今天在群里看到一個需求，啊這種三角形缺角怎么做啊，還帶半透明陰影的。

分析

要實現這個，可以用css做三角，網上找一下代碼，像這樣。

由于以前沒有試過border能不能帶透明，所以需要試驗一下。

那么去試驗下，red能不能用rgba去替換，如果可以的話那就成功一半了。

簡單試驗下，居然可以。

.sanjiao
{
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid rgba(0,0,0,.5);
border-left: 100px solid transparent;
}

那么接下來就是在陰影的三角里插入一個白色的略小一點的三角就可以了。

實現

至此就完成了這個缺角還帶陰影的div了，至于右側填充一個白色的div，還有下面正常矩形div就不再這里實現了。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com