css各种图形形状代码 |rem 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 实现图形形状的代码，不同的形状需要不同的代码实现，大家可以通过练习来掌握这些代码，实现更多更加丰富的CSS效果。