CSS3實現平行四邊形間隔的邊框
阿新 • • 發佈：2018-12-21
效果如下：
其實要實現這個很簡單，只需要配合一個CSS3的屬性就能簡單實現了。
transform: skewX()
定義沿著 X 軸的 2D 傾斜轉換。
W3C案例地址
用好這個屬性就簡單許多了
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>平行四邊形</title> <style type="text/css"> .Parallelograms { width: 750px; height: 10px; background: #fff; font-size: 0px; overflow: hidden; white-space: nowrap; } .Parallelogram { display: inline-block; width: 70px; margin: 0 10px; height: 10px; background: #f58f8f; transform: skewX(-25deg); } .Parallelogram:nth-child(1) { margin-left: -45px; } .Parallelogram:nth-child(odd) { background: #8fc9f5; } </style> </head> <body> <div class="Parallelograms"> <div class="Parallelogram"></div> <div class="Parallelogram"></div> <div class="Parallelogram"></div> <div class="Parallelogram"></div> <div class="Parallelogram"></div> <div class="Parallelogram"></div> <div class="Parallelogram"></div> <div class="Parallelogram"></div> <div class="Parallelogram"></div> <div class="Parallelogram"></div> <div class="Parallelogram"></div> <div class="Parallelogram"></div> </div> </body> </html>