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

Answer 1

I know you don't want SVG, but it's really easy, and way faster than making it with css:

• Make a screenshot of your lightning bolt.
• Go to: http://www.base64-image.de/ upload the image(jpg, png, gif).
• Get the css background image code

Answer 2

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>

Answer 3

You can achieve a slightly different lighting bolt with html symbols. Note that not all browsers support all of them.

Here is a quick example what you can do with just css/html.

.circle {
	border-radius: 50%;
    border: 4px solid black;
	width: 100px;
	height: 100px;
    font-size: 70px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    background: white;
}

.square{
    border: 4px solid red;
    width: 106px;
    height: 106px;
    background: red;
}

<div class="square">
    <div class="circle">⚡</div>
</div>

Advantage of this one is that this is simple, does not require anything. Disadvantage is that the bolt is slightly different and that not all browsers might support the symbol.

If you need exact picture, generate it in SVG and add as an svg or a font.

Sadly enough it looks like the sign is not visible on windows, but on macos (chrome) it looks this way:

On ubuntu it also visible, but looks differently.