为一半的星星设置颜色[重复]答案

【问题标题】：Set color for half of the star [duplicate]为一半的星星设置颜色[重复]
【发布时间】：2021-04-19 03:24:31
【问题描述】：

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

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

【问题讨论】：

你不能。您将需要另一个专用图标。
如果您没有专用图标，您可以再创建一个带有星号的 div，并将宽度固定为 50%，并将位置悬停在当前图标上。这不是一个好的解决方案。请找到专用图标。
@Santosh 好点。我想如果你那么绝望，你可以使用background-clip: text; 和渐变进行全发送，但我离题了...... :)
或者查看这个codepen在google之后找到了。 codepen.io/FredGenkin/pen/eaXYGV

标签： css reactjs styled-components emotion

【解决方案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>

【讨论】：