0

I need to create rating stars in css, I have two requirements so far,

  1. Half colored star.
  2. Star with border but Body transparent.

So far I was able to create a fully colored stars using CSS. But with this structure I am unable to achieve the above requirements.

This is what I have now, I followed this ANSWER for my reference

.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>
Ramesh
  • 2,297
  • 2
  • 20
  • 42
  • So you're saying that all you've got is 100% copied from the linked SO question. You haven't added/changed anything by yourself. And now you want us to make it work for your requirements. Is that correct? – connexo Nov 23 '18 at 07:52
  • @connexo You can compare the code sir. I followed the pattern. As well as I researched on my requirement and I couldn't find any answers. I found some that they are using unicodes and svg. But actually I want to do this in css. Since I couldn't find any answers in internet, I posted this question. If you really feel this is an useless question, you have enough power to close this question. Thank You. – Ramesh Nov 23 '18 at 08:01
  • You might be able to get a half star using this by applying some clipping or something like that; but to get only a border in a star shape, this technique is really not suitable IMHO. – misorude Nov 23 '18 at 09:08
  • @misorude Thank you for your reply sir. Will it be able to do this with pure css or do I need support of svg or something else? – Ramesh Nov 23 '18 at 10:43

1 Answers1

4

With yours requirements I would use SVG. This is how I would do it:

.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>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
  • This is nice approach sir. Thank you for reply. Is it possible to do the same using css? – Ramesh Nov 23 '18 at 10:32
  • I think SVG is the best solution and it's practically as if it were HTML and CSS. You may try doing the same with css `clip-path` although the browser support is not that good. Also I think you may need to use shadows instead of the stroke. This is how you would do it with clip-path: `div.half-star{ -webkit-clip-path: polygon(47.6% 75%, 18.21% 90.45%, 23.82% 57.72%, 0.047% 34.55%, 32.9% 29.77%, 47.6% 0%); }` and `div.star{ -webkit-clip-path: polygon(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%); }` – enxaneta Nov 23 '18 at 10:41
  • 2
    Okie sir, this is working fine. Thank you for your time and valuable answer – Ramesh Nov 23 '18 at 10:46