标签：har log web meta code 分享 color 20px htm
先上效果图：
原理很简单，只要利用css的2D转化加上圆角边框即可；
1.先用圆角边框写出下面的效果：
2.再写出一个反方向的效果图：
然后将这两个旋转一定的角度拼接在一起即可；
完整代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 .box{ 12 width:220px; 13 height:100px; 14 position:relative; 15 margin:100px auto; 16 } 17 .box:before,.box:after{ 18 content:""; 19 width:60px; 20 height:60px; 21 position:absolute; 22 top:0; 23 left:0; 24 border:20px solid #06c999; 25 border-radius:50px 50px 0 50px; 26 -webkit-transform:rotate(-45deg); 27 } 28 .box:after{ 29 left:auto; 30 right:0; 31 border-radius:50px 50px 50px 0; 32 -webkit-transform:rotate(45deg); 33 } 34 </style> 35 </head> 36 <body> 37 <div class="box"></div> 38 </body> 39 </html>
标签：har log web meta code 分享 color 20px htm
原文地址：http://www.cnblogs.com/qmdx00/p/7487350.html
