當前位置：
首頁 >
css实现倒8字效果
發布時間：2025/4/16
23
豆豆
生活随笔
收集整理的這篇文章主要介紹了
css实现倒8字效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
先上效果圖：
原理很簡單，只要利用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>?
轉載于:https://www.cnblogs.com/qmdx00/p/7487350.html
總結
以上是生活随笔為你收集整理的css实现倒8字效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux下tmp文件夹的文件自动删除的
- 下一篇： 理解 Azure 虚拟机的性能监视