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:

html,  body {    margin: 0;    height: 100%;    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);  }  .wrap {    height: 50vw;    width: 50vw;    position: relative;    margin: 0 auto;  }  .circ:hover{    background:gray;    }  .circ:hover .bolt{    background:gold;    }  .circ {    height: 50%;    width: 50%;    background: white;    border: 5px solid black;    border-radius: 50%;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    box-shadow:0 0 10px 2px black;  }  .bolt {    position: absolute;    top: 5%;    left: 50%;    height: 70%;    width: 30%;    background: yellow;    border: 2px solid black;    border-bottom: none;    transform: perspective(200px) skewX(-10deg) rotateX(15deg);  }  .bolt:before {    content: "";    position: absolute;    top: 90%;    left: 20%;    height: 50%;    width: 100%;    background: inherit;    border: 2px solid black;    transform:  ;  }  /*  .bolt:after{    content:"";    position:absolute;    top:-40%;left:20%;    height:50%;    width:100%;    background:inherit;    transform:perspective(50px) skewX(-10deg) rotateX(45deg);    }*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>  <div class="wrap">      <div class="circ">        <div class="bolt"></div>    </div>  </div>

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>