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)