Bursts

suggest change

A burst is similar to a star but with the points extending less distance from the body. Think of a burst shape as a square with additional, slightly rotated, squares layered on top.

The additional squares are created using the `::before` and `::after` psuedo-elements.

8 Point Burst

An 8 point burst are 2 layered squares. The bottom square is the element itself, the additional square is created using the `:before` pseudo-element. The bottom is rotated 20°, the top square is rotated 135°.

``````<div class="burst-8"></div>

.burst-8 {
background: rgb(246, 156, 85);
width: 40px;
height: 40px;
position: relative;
text-align: center;
-ms-transform: rotate(20deg);
transform: rotate(20eg);
}

.burst-8::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: rgb(246, 156, 85);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}``````

12 Point Burst

An 12 point burst are 3 layered squares. The bottom square is the element itself, the additional squares are created using the `:before` and `:after` pseudo-elements. The bottom is rotated 0°, the next square is rotated 30°, and the top is rotated 60°.

``````<div class="burst-12"></div>

.burst-12 {
width: 40px;
height: 40px;
position: relative;
text-align: center;
background: rgb(246, 156, 85);
}

.burst-12::before, .burst-12::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: rgb(246, 156, 85);
}

.burst-12::before {
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}

.burst-12::after {
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}``````