css图片五角星半颗星 |css点击按钮立体效果

五角星

.star {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #f5d76e;
border-left: 50px solid transparent;
transform: rotate(35deg);
position: relative;
top: -10px;
left: -10px;
}
.star:before {
content: "";
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #f5d76e;
border-left: 50px solid transparent;
position: absolute;
top: 12px;
left: -47px;
transform: rotate(-70deg);
}
.star:after {
content: "";
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #f5d76e;
border-left: 50px solid transparent;
position: absolute;
top: 12px;
left: 47px;
transform: rotate(70deg);
}

上面的 CSS 代码中，大家定义了一个类名为 star 的五角星样式。其中，大家使用 border 属性来定义五角星的形状，通过 transform 属性来旋转五角星的方向，以及通过 :before 和 :after 伪元素来创建星星的两个角。

半颗星

.half-star {
display:inline-block;
position:relative;
width: 0;
height: 0;
border-right: 40px solid transparent;
border-top: 28px solid #f5d76e;
border-left: 40px solid transparent;
}
.half-star:before {
content: "";
position: absolute;
top: 0;
left: -40px;
width: 0;
height: 0;
border-right: 40px solid transparent;
border-top: 28px solid #f5d76e;
border-left: 40px solid transparent;
transform: rotate(-35deg);
}
.half-star:after {
content: "";
position: absolute;
top: 0;
left: -40px;
width: 0;
height: 0;
border-right: 40px solid transparent;
border-top: 28px solid #f5d76e;
border-left: 40px solid transparent;
transform: rotate(35deg);
clip-path: inset(0, 50%, 0, 0); /* 只显示一半 */
}

与五角星不同的是，半颗星仅仅是一个三角形的形状。大家通过两个伪元素来创建两个角，并通过 clip-path 属性来只显示其中的一半。

以上就是如何通过 CSS 来创建五角星和半颗星的方法。大家可以通过这个方法创建自己想要的图案，为自己的网页加上更漂亮的装饰。