html – 4个圆点星形_html-js-css

概述我试图在CSS中尽可能地将这颗恒星作为像素完美,这是我到目前为止所尝试的,但它是一个5角度的恒星,我想它只有4点也可以让角落更加圆润？ #star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-ri

我试图在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>

解决方法@H_403_11@ 也许你可以在 Black Four Pointed Star Unicode char上使用渐变：

✦

它有一些兼容性问题(主要由text-fill-color引起),但根据您的要求,它可以完成工作.

.four-point-star::after,.four-point-star::before {    position: absolute;    top: 0;    left: 0;    content: "26";    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;}