我试图在CSS中尽可能地将这颗恒星作为像素完美,这是我到目前为止所尝试的,但它是一个5角度的恒星,我想它只有4点也可以让角落更加圆润？
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
<div id="star-five"></div>
解决方法
也许你可以在
Black Four Pointed Star Unicode char上使用渐变：
✦
它有一些兼容性问题(主要由text-fill-color引起),但根据您的要求,它可以完成工作.
.four-point-star::after,.four-point-star::before {
position: absolute;
top: 0;
left: 0;
content: "\2726";
font-size: 12rem;
}
.four-point-star::after { /* The foreground star */
background: linear-gradient(135deg,rgba(255,191,183,1) 20%,rgba(243,44,117,1) 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.four-point-star::before { /* The star shadow */
color: transparent;
text-shadow: 2px 3px 10px rgba(242,96,85,1);
}
/* Demo styling */
body {
background: #fbd629;
padding: 0 2rem;
}
.four-point-star {
position: relative;
}
<span class="four-point-star"></span>
