4个圆角星形

Question

我正在尝试在 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>

Answer 1

也许您可以在Black Four Pointed Star Unicode 字符上使用渐变：

✦

它有一些兼容性问题（主要由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>

Answer 2

显然，对于这种形状，内联 SVG 将是最简单和最跨浏览器的解决方案（并且具有响应式像素完美输出）。
这是一个简单的内联 svg 代码，用于制作一个填充有渐变的四点星：

svg{
  display:block; margin:0 auto;
  width:30%; height:auto;
}
/* For the demo */ body{background: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg');background-size:cover;}

<svg viewbox="0 0 10 10">
  <defs>
    <linearGradient id="starGrad">
      <stop offset="0%" stop-color="rgb(153,218,255)" />
      <stop offset="100%" stop-color="rgb(0,128,128)"/>      
    </linearGradient>
  </defs>
  <path fill="url(#starGrad)" d="M5 1 Q5.8 4.2 9 5 Q5.8 5.8 5 9 Q4.2 5.8 1 5 Q4.2 4.2 5 1z" />  
</svg>

这四个点是由路径元素和quadratic bezier curves 组成的。星号中充满了SVG linear gradient。

Answer 3

您可以使用两个旋转和倾斜的矩形获得四点星形。

body {
  /* just styles for demo */
  background-color: #fdd700;
}

.four-point-star {
  width: 100px;
  height: 100px;
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.four-point-star:before,
.four-point-star:after {
  content: "";
  position: absolute;
  background-color: #fa5b88;
  display: block;
  left: 0;
  width: 141.4213%; /* 100% * √2 */
  top: 0;
  bottom: 0;
  border-radius: 5%;
  transform: rotate(66.66deg) skewX(45deg);
}

/* the same but +90deg to rotate */
.four-point-star:after {
  transform: rotate(156.66deg) skew(45deg);
}

<div class="four-point-star"></div>

Answer 4

我建议使用 SVG。如果您不想要 svg 文件的另一个 http 请求，您可以在 'content' 属性中包含 svg 代码：

content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");

.star-4-point {
  background: url("data:image/svg+xml; utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='50px' height='50px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50;' xml:space='preserve'><path d='M25,50c0,0,1.325-8.413,8.957-16.043C41.587,26.325,50,25,50,25l0,0c0,0-8.413-1.325-16.043-8.957C26.325,8.413,25,0,25,0 l0,0c0,0-1.325,8.413-8.957,16.043C8.413,23.675,0,25,0,25l0,0c0,0,8.413,1.325,16.043,8.957C23.675,41.588,25,50,25,50'/></svg>");
  height: 50px;
  width: 50px;
}

<div class="star-4-point"></div>