css实现倒8字效果

最新推荐文章于 2022-04-13 10:51:34 发布

weixin_30900589

最新推荐文章于 2022-04-13 10:51:34 发布

阅读量156

点赞数

原文链接：http://www.cnblogs.com/qmdx00/p/7487350.html

版权

先上效果图：

原理很简单，只要利用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>