Create a lightning bolt design (like The Flash)

Question

I am trying to re-create the lightning bolt symbol from The Flash (DC Comics) (or the T-shirt worn by Big Bang Theory's Sheldon Cooper) in CSS.

This is going to act like a star rating system, only a 'lightning rating system' instead.

However, since I'm trying to keep the HTML to a minimum, I'd like to style this in CSS only.

I have got to the stage of:

but do not know how to continue from here.

I've attempted using the perspective property, although I don't think I've quite got a handle on it as of yet - mainly because I'm slightly confused as to what it is doing to the :before and :after properties when it is applied to the parent.

I have chosen CSS for this as the white background and bolt colour will be changing on click, and because I know how to do that with CSS.

(I know SVG may be a better option here, but I have not been able to learn this due to time restrictions, so I'd prefer to use 'what I know how to use', which is, CSS)

Answer 1

SVG

Here you go @Professor.CSS. @jbutler483
A Circle
And Polygon

svg {
  background-color: red;
}

<svg width="100px" height="200px" viewBox="0 0 100 150">
  <circle fill="white" stroke="black" cx="50" cy="75" r="50"></circle>
  <polygon stroke="gray" fill="yellow" points="100,0 67,50 90,45 47,100 70,95 0,150 27,110 12,113 50,70 30,73 100,0" />
</svg>

or css

Its just ::before and ::after elements on the lighting. drop-shadow on the lighting container.

body {
  background-color: red;
}
.container {
  -webkit-filter: drop-shadow(2px 2px 0px gray);
}
.circle {
  display: inline-block;
  border-radius: 50%;
  background-color: white;
  border: 5px solid black;
  border-color: black;
}
.lightning {
  position: relative;
  margin: 50px;
  width: 30px;
  height: 50px;
  transform-origin: 50% 50%;
  transform: skewX(-30deg) skewY(-30deg) rotate(10deg);
  background-color: yellow;
}
.lightning:before {
  position: absolute;
  border-style: solid;
  border-width: 0 0 40px 30px;
  border-color: transparent transparent yellow transparent;
  top: -39px;
  left: -17px;
  content: "";
}
.lightning:after {
  position: absolute;
  border-style: solid;
  border-width: 0 0 40px 30px;
  border-color: transparent transparent transparent yellow;
  bottom: -39px;
  right: -17px;
  content: "";
}

<div class="circle">
  <div class="container">
    <div class="lightning"></div>
  </div>
</div>