Половина и Тело Прозрачная Звезда - PullRequest
Новая
       62

Половина и Тело Прозрачная Звезда

0 голосов
/ 23 ноября 2018

Мне нужно создать рейтинг звезд в css, у меня пока есть два требования:

  1. Полуцветная звезда.
  2. Звезда с рамкой, но тело прозрачное.

До сих пор мне удавалось создавать полноцветные звезды с помощью CSS.Но с этой структурой я не могу выполнить вышеуказанные требования.

Это то, что я имею сейчас, я следовал этому ОТВЕТ для справки 

.star {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .9em;
  margin-right: .9em;
  margin-bottom: 1.2em;
  border-right: .3em solid transparent;
  border-bottom: .7em solid #FC0;
  border-left: .3em solid transparent;
  /* Controlls the size of the stars. */
  font-size: 24px;
}

.star:before,
.star:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: .6em;
  left: -1em;
  border-right: 1em solid transparent;
  border-bottom: .7em solid #FC0;
  border-left: 1em solid transparent;
  transform: rotate(-35deg);
}

.star:after {
  transform: rotate(35deg);
}
<p>
  <i class="star"></i>
  <i class="star half"></i>
  <i class="star transparent"></i>
</p>

1 Ответ

0 голосов
/ 23 ноября 2018

С твоими требованиями я бы использовал SVG.Вот как бы я это сделал: 

.star{border:1px solid #d9d9d9; width:30px;}
.star{fill:gold; stroke:orange; stroke-width:5px;}
.star.full use:nth-child(2){display:none;}
.star.half use:nth-child(1),
.star.empty use:nth-child(2)
{display:none;}
.star.empty{fill:none;}
<svg viewBox="0 0 95.1 90.45" style="width:0; height:0; display:none">
<defs>  
<polygon id="half_star" points="47.6, 75 18.21, 90.45 23.82, 57.72 0.047, 34.55 32.9, 29.77 47.6, 0"></polygon>
<polygon id="star" points="47.6, 0 62.29, 29.77 95.15, 34.55 71.38, 57.73 76.99, 90.458 47.6, 75 18.21, 90.45 23.82, 57.73 0.05, 34.55 32.9, 29.77"></polygon>
</defs> 
</svg>

<svg viewBox="0 0 95.1 90.45" class="star full">
  <use xlink:href="#star" />
  <use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star half">
  <use xlink:href="#star" />
  <use xlink:href="#half_star" />
</svg>
<svg viewBox="0 0 95.1 90.45" class="star empty">
  <use xlink:href="#star" />
  <use xlink:href="#half_star" />
</svg>
...