先上效果图：
原理很简单，只要利用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>
时间： 2024-10-04 10:44:35