网页中三角切边还半透明，现在的设计师越来越牛，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;
}

 

 

 

那么接下来就是在阴影的三角里插入一个白色的略小一点的三角就可以了。

 

实现

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<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就不再这里实现了。