CSS3 菱形圖形

CSS3 通過 transform 屬性以及偽元素 before 和 after 來實現(xiàn)菱形圖形的制作。

.diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #f00;
position: relative;
top: -25px;
left: -25px;
transform: rotate(-45deg);
}
.diamond:before {
content: "";
display: block;
width: 0;
height: 0;
border: 25px solid transparent;
border-bottom-color: #f00;
position: absolute;
top: -25px;
left: 0;
transform: rotate(-45deg);
}
.diamond:after {
content: "";
display: block;
width: 0;
height: 0;
border: 25px solid transparent;
border-top-color: #f00;
position: absolute;
bottom: -25px;
left: 0;
transform: rotate(-45deg);
}

其中，.diamond 為菱形圖形的外層容器，需要設置寬高為0，邊框為50px的透明色，同時設置相對定位進行微調(diào)，通過 transform 屬性將菱形旋轉(zhuǎn)45度。這樣，我們就能得到一個正方形，旋轉(zhuǎn)45度之后變成了菱形。而偽元素 before 和 after，分別作為菱形的邊框區(qū)域的上半部分和下半部分，同樣通過設置寬高為0，邊框為25px的透明色，以及旋轉(zhuǎn)45度，形成菱形的兩個棱角部分。