我怎样才能让这颗星只有一个元素[重复]答案

【问题标题】：How can I make this star a one element only [duplicate]我怎样才能让这颗星只有一个元素[重复]
【发布时间】：2019-11-12 10:34:24
【问题描述】：

我已经在 HTML 和 CSS 中创建了这颗星，但我正在尝试将它变成一个元素。这是我目前所拥有的：

.star{
       margin:22px auto;left:0;right:0;
       width: 0px;
       height: 0px;
       border-right:  20px solid transparent;
       border-bottom: 14px  solid #e74c3c;
       border-left:   20px solid transparent; 
       position: absolute;
       transform:    rotate(35deg);
    }
       .star-2 {
       position: absolute;
       display: block;
       top: 0px;
       left: -20px;
       width: 0px;
       height: 0px;
       border-right: 20px solid transparent;
       border-bottom: 14px solid #e74c3c;
       border-left: 20px solid transparent;
       transform: rotate(-70deg);
    }
    .star-3{ 
       box-sizing:border-box;
       border-bottom: 15px solid #e74c3c;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       position: relative; 
       height: 0;
       width: 0;
       top: -10px;
       left: -12px;
       display: block;
       transform: rotate(-35deg);
    }

    <div class="star">
      <div class="star-2">
      
      </div>
      <div class="star-3">
      
      </div>
    </div>

我是否可以将所有这些都变成一个元素，例如 <div class="star"></div>，仅此而已？

【问题讨论】：

总有★或☆
Star Shape stackoverflow.com/questions/25384761/pure-css-star-shape
CSS 剪辑路径提供了一个多边形选项：developer.mozilla.org/en-US/docs/Web/CSS/clip-path，如 lab.iamvdo.me/css-svg-masks 所示

标签： html css

【解决方案1】：

为了达到预期的效果，使用font-size使用字符实体和控制大小，使用color

使用星形背景

作为参考，请点击此链接以获取具有不同字符实体代码的不同星选项 - https://www.html.am/html-codes/character-codes/html-star-code.cfm

.star{
  font-size:200px;
  color: #e74c3c
}

 <div class="star">&#9733;
 </div>

codepen-https://codepen.io/nagasai/pen/NZYweL

【讨论】：

【解决方案2】：

当然，您可以使用伪元素 ::after 和 ::before 代替 .star-2 和 .star-3

这些元素的一个小问题是你需要给它们一个 content 属性 - 一个空字符串很好，content: '';

这是您更新后的 CSS 和 Codepen 中的示例：

.star {
  margin: 22px auto;
  left: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #e74c3c;
  border-left: 20px solid transparent;
  position: absolute;
  transform: rotate(35deg);
}

.star::before {
  content: "";
  position: absolute;
  display: block;
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #e74c3c;
  border-left: 20px solid transparent;
  transform: rotate(-70deg);
}

.star::after {
  content: "";
  box-sizing: border-box;
  border-bottom: 15px solid #e74c3c;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  position: relative;
  height: 0;
  width: 0;
  top: -10px;
  left: -12px;
  display: block;
  transform: rotate(-35deg);
}

&lt;div class="star"&gt;&lt;/div&gt;

https://codepen.io/LL782/pen/rEdYoB

【讨论】：

【解决方案3】：

带有伪元素：https://jsfiddle.net/wwWaldi/hy4pbnzx/5/

    .star {
  margin: 22px auto;
  left: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #e74c3c;
  border-left: 20px solid transparent;
  position: absolute;
  transform: rotate(35deg);
}

.star::before {
  content: '';
  position: absolute;
  display: block;
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #e74c3c;
  border-left: 20px solid transparent;
  transform: rotate(-70deg);
}

.star::after {
  content: '';
  box-sizing: border-box;
  border-bottom: 15px solid #e74c3c;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  position: relative;
  height: 0;
  width: 0;
  top: -10px;
  left: -12px;
  display: block;
  transform: rotate(-35deg);
}

【讨论】：

【解决方案4】：

使用::before 和::after：

.star {
  margin:22px auto;left:0;right:0;
  width: 0px;
  height: 0px;
  border-right:  20px solid transparent;
  border-bottom: 14px  solid #e74c3c;
  border-left:   20px solid transparent; 
  position: absolute;
  transform:    rotate(35deg);
}

.star::before {
  position: absolute;
  display: block;
  content:'';
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #e74c3c;
  border-left: 20px solid transparent;
  transform: rotate(-70deg);
}

.star::after { 
  box-sizing:border-box;
  border-bottom: 15px solid #e74c3c;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  content:'';
  position: relative; 
  height: 0;
  width: 0;
  top: -10px;
  left: -12px;
  display: block;
  transform: rotate(-35deg);
}

&lt;div class="star"&gt;&lt;/div&gt;

【讨论】：