CSS怎么畫長菱形？

/* 1. 利用padding和border */
.long-rhombus {
width: 0;
height: 100px;
border-left: 50px solid transparent; /* 高度的一半 */
border-right: 50px solid transparent;
border-top: 50px solid #f00;
border-bottom: 50px solid #f00;
padding: 0 50px; /* 寬度的一半 */
}
/* 2. 利用transform */
.long-rhombus {
width: 100px;
height: 100px;
background-color: #f00;
transform: rotate(45deg) scale(1, 1.4);
}
/* 3. 利用偽元素 */
.long-rhombus {
width: 100px;
height: 100px;
position: relative;
}
.long-rhombus:before {
content: '';
display: block;
height: 0;
width: 0;
position: absolute;
top: -50px; /* 高度的一半 */
left: 0;
border-left: 50px solid transparent; /* 寬度的一半 */
border-right: 50px solid transparent;
border-bottom: 50px solid #f00;
}
.long-rhombus:after {
content: '';
display: block;
height: 0;
width: 0;
position: absolute;
bottom: -50px; /* 高度的一半 */
left: 0;
border-left: 50px solid transparent; /* 寬度的一半 */
border-right: 50px solid transparent;
border-top: 50px solid #f00;
}

以上是三種常用的方式，根據需求選擇合適的方法即可。