css3绘制三角形和div阴影用法实例

div+css

最终效果：

css3绘制三角形和div阴影用法实例

实现方法：

上图的的两个小三角，如果是在css2中，我们会采用两个span之类的标签，再加上背景图片，但现在，我们可以通过代码这样写：

.line{ width:320px; height:10px; position:relative; background:#ccc; margin:100px auto;}
 .line::before{ bottom:10px; left:0; display:block; content:''; position:absolute; width:0; height:0; border:6px solid 
#000; border-color:transparent transparent #000 transparent; }
 .line::after{ bottom:-12px; right:0; display:block; content:''; position:absolute; width:0; height:0; border:6px solid 
#000; border-color:#000 transparent transparent transparent; }

关于第二个图的立体效果，其实是通过阴影产生的，那么，这个阴影，我们也是通过after来实现的，只不过，我们通过定位技术，将阴影位于长方形的下方，就有种向上突出的感觉。实现代码：

.box{ width:220px; height:28px; position:relative; background:#fff; line-height:28px; text-align:center; margin:0 
auto; border-left:2px solid #c00;-webkit-box-shadow:0 0 2px rgba(194,194,194,.6);}
 .box::after{ content:''; display:block; width:60px; height:10px; -webkit-transform:rotate(4deg);-webkit-box- 
shadow:0 5px 5px rgba(194,194,194,.8); position:absolute; right:1%; bottom:4px; z-index:-1;}

预览地址：https://pdbn.top/uploads/2015/07/css3shili1.html

推荐阅读：
用CSS绘制三角形
CSS:before选择器用法