平行四邊形是學習CSS過程中常用的基本圖形。在CSS中創建平行四邊形非常簡單。 首先,你需要了解平行四邊形的屬性。它有兩個重要的屬性:
transform: skew(30deg);
這個屬性用于將矩形傾斜。這里我們使用30度的傾角。
width: 200px; height: 100px;
這個屬性既可以用于設置矩形的寬度,也可以用于設置矩形的高度。
使用這兩個屬性,我們可以創建平行四邊形的CSS代碼:
.parallelogram { width: 200px; height: 100px; background-color: #2ecc71; transform: skew(30deg); }
在這個CSS代碼中,我們創建了一個寬度為200px,高度為100px的矩形。并且通過使用skew屬性,將它傾斜了30度。最后,我們設置了背景顏色為綠色。
如果你想要創建一個左傾斜的平行四邊形,只需要將30度改成-30度即可。整個CSS代碼如下所示:
.parallelogram-left{ width: 200px; height: 100px; background-color: #2ecc71; transform: skew(-30deg); }
以上就是使用CSS創建平行四邊形的方法。
上一篇帶頭像登陸框 css
下一篇帶css的商城網頁代碼