CSS可以通過各種技巧來實(shí)現(xiàn)各種形狀的圖形。下面是一些例子：

/* 正方形 */
.square {
width: 100px;
height: 100px;
background-color: red;
}
/* 圓形 */
.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
/* 三角形 */
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
/* 梯形 */
.trapezoid {
width: 200px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
/* 菱形 */
.diamond {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
/* 心形 */
.heart {
width: 100px;
height: 100px;
position: relative;
transform: rotate(-45deg);
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 50px;
height: 80px;
background-color: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
}
.heart::before {
left: 0;
}
.heart::after {
left: 50px;
}
/* 五邊形 */
.pentagon {
width: 100px;
height: 100px;
background-color: red;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

這些只是 CSS 可以實(shí)現(xiàn)的一些基本形狀，實(shí)際上我們可以用各種技巧來制作各種奇形怪狀的圖形。