css - 设置半颗星的颜色

Question

这个问题在这里已经有了答案:





Is it possible to apply CSS to half of a character?

(21 个回答)


10 个月前关闭。




如何只为星星的一半设置颜色？喜欢下面的图片吗？

    <span className={"star"}>
     ★
    </span>

Answer 1

body {
  font-size: 60px;
}


.half {
  display: inline-flex;
}

  .half > div:first-child {
  overflow: hidden;
  width: 27px;
  z-index: 1;
  color: #f97d00;
}   
  .half > div:last-child {
  position: relative;
  margin-left:-27px;
}
 <span class='half'><div>★</div><div>★</div>