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

CSS

CSS only using :before and :after pseudo elements, CSS triangles and transform. It would be difficult to make this particular solution responsive given the usage of CSS triangles as borders cannot be percentage based. This solution uses two divs as the basis of the lightning bolt and it's outline.

The bolt is created in the following way:

• The middle of the bolt is specified in .boltOuter/.boltInner. It is a rectangle skewed on the X and Y axis to make it a tilted rhombus
• The "prongs" are the :before and :after pseudo elements positioned relatively to the container .boltOuter/.boltInner
• The "prongs" are made using CSS triangles (zero height and width elements with selective borders). The triangles are rotated to get the desired angle
• All elements of .boltInner are made smaller and offset from .boltOuter to allow .boltOuter to act as the silver outline

body {
    background-color: red;
}
.circle {
    background-color: white;
    border: 5px solid black;
    border-radius: 50%;
    height: 400px;
    left: 100px;
    position: relative;
    top: 200px;
    width: 400px;
}
.boltOuter, .boltInner {
    position: absolute;
}
.boltOuter:before, .boltOuter:after, .boltInner:before, .boltInner:after {
    content: "";
    display: block;
    height: 0;
    position: absolute;
    transform: rotateY(-60deg);
    width: 0;
}
.boltOuter {
    background-color: silver;
    height: 300px;
    left: 140px;
    top: 50px;
    transform: skewX(-10deg) skewY(-20deg);
    width: 110px;
    z-index: 2;
}
.boltOuter:before, .boltOuter:after {
    border: 150px solid transparent;
    z-index: 1;
}
.boltOuter:before {
    border-bottom-color: silver;
    border-right-color: silver;
    left: -150px;
    top: -200px;
}
.boltOuter:after {
    border-left-color: silver;
    border-top-color: silver;
    bottom: -200px;
    right: -150px;
}
.boltInner {
    background-color: gold;
    height: 290px;
    left: 5px;
    top: 5px;
    width: 100px;
    z-index: 4;
}
.boltInner:before, .boltInner:after {
    border: 140px solid transparent;
    z-index: 3;
}
.boltInner:before {
    border-bottom-color: gold;
    border-right-color: gold;
    left: -143px;
    top: -190px;
}
.boltInner:after {
    border-top-color: gold;
    border-left-color: gold;
    bottom: -190px;
    right: -143px;
}

JS Fiddle: https://jsfiddle.net/o7gm6dsb/