Question

我已经用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>就可以了？

Answer 1

使用::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);
}

<div class="star"></div>

Answer 2

带有伪元素：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);
}

Answer 3

绝对可以使用伪元素::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);
}

<div class="star"></div>

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

Answer 4

要获得预期的结果，请使用字符实体和控件大小（使用 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

我怎样才能使这颗星星成为一个元素

4 个答案: