先上效果图：
原理很简单，只要利用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>css实现倒8字效果
原文地址：http://www.cnblogs.com/qmdx00/p/7487350.html