css3 shapes |html 内嵌 css

/* 圆形 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%; 
}
/* 三角形 */
.triangle {
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid transparent;
}
/* 梯形 */
.trapezoid {
width: 200px;
height: 100px;
border-top: 50px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}

除了这些基本形状，CSS3的shapes属性还可以实现更加复杂的形状，比如说菱形和五角星等形状。需要注意的是，在实现这些复杂的形状时，大家需要使用CSS2.1的clip属性来进行裁剪。

/* 菱形 */
.diamond {
width: 100px;
height: 100px;
transform: rotate(45deg); /* 将正方形旋转45度 */
clip: rect(0, 100px, 100px, 0); /* 将旋转后的正方形裁剪成菱形 */
}
/* 五角星 */
.star {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
position: relative;
}
.star:before {
content: "";
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
position: absolute;
top: -25px;
left: 0;
}
.star:after {
content: "";
width: 0;
height: 0;
border-top: 25px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
position: absolute;
top: 0;
left: -25px;
}

总之，CSS3的shapes属性可以让大家实现各种形状，让网页的装饰变得更加独特。当然，这些形状的实现需要大家对CSS的掌握程度提高，同时也需要大家的想象力和创造力。