How to make 8 Point Burst Shape in CSS?

Question

Aryan Kumar · Answer

To make an 8-point burst shape in CSS, you can use the following steps:

Create a div element and set its width and height to 50px.
Set the div element's background color to black.
Use the ::before and ::after pseudo-elements to create two squares. The ::before pseudo-element should be rotated 20 degrees and the ::after pseudo-element should be rotated 135 degrees.
Set the ::before and ::after pseudo-elements' width and height to 25px.
Set the ::before and ::after pseudo-elements' background color to white.

Here is an example of the CSS code for an 8-point burst shape:

Code snippet

div {
  width: 50px;
  height: 50px;
  background-color: black;
}

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background-color: white;
  transform: rotate(20deg);
}

div::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  background-color: white;
  transform: rotate(135deg);
}

This code will create an 8-point burst shape that is 50px wide and 50px high. The shape will be black with white squares at the top, left, bottom, and right.

You can adjust the width and height of the shape, as well as the color of the background and squares, to suit your needs. You can also use the ::before and ::after pseudo-elements to create other shapes, such as triangles, stars, and circles.

Ravi Vishwakarma · Answer

forum

How to make 8 Point Burst Shape in CSS?

Can you answer this question?

2 Answers