作為前端必備的技能之一，CSS可以實(shí)現(xiàn)多種多樣的圖形形狀，通過(guò)對(duì)不同的代碼進(jìn)行了解和掌握，我們就能夠?qū)崿F(xiàn)各種豐富的設(shè)計(jì)效果。下面就給大家介紹幾種常見(jiàn)的CSS圖形形狀代碼。

/* 圓形 */
.circle {
border-radius: 50%;
}
/* 矩形 */
.rect {
border-radius: 0;
}
/* 橢圓 */
.ellipse {
border-radius: 50% / 25% ;
}
/* 三角形 */
.triangle {
width: 0;
height: 0;
border-top: 50px solid #f00;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
/* 梯形 */
.trapezoid {
width: 150px;
height: 0;
border-bottom: 50px solid #f00;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
/* 菱形 */
.diamond {
width: 0;
height: 0;
border: 50px solid #f00;
transform: rotate(45deg);
}
/* 五邊形 */
.pentagon {
position: relative;
width: 100px;
height: 100px;
background: #f00;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
/* 六邊形 */
.hexagon {
position: relative;
width: 100px;
height: 57.74px;
background: #f00;
clip-path: polygon(50% 0%, 100% 28.87%, 100% 85.26%, 50% 100%, 0% 85.26%, 0% 28.87%);
}

以上是幾種 CSS 實(shí)現(xiàn)圖形形狀的代碼，不同的形狀需要不同的代碼實(shí)現(xiàn)，我們可以通過(guò)練習(xí)來(lái)掌握這些代碼，實(shí)現(xiàn)更多更加豐富的CSS效果。