forum

Home / DeveloperSection / Forums / How to make 8 Point Burst Shape in CSS?

Ask Question
Ethan Karla

Ethan Karla

Follow
An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Can you answer this question?

Answer

2 Answers

Aryan Kumar

Aryan Kumar

10-Jun-2023

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

  1. Create a div element and set its width and height to 50px.
  2. Set the div element's background color to black.
  3. 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.
  4. Set the ::before and ::after pseudo-elements' width and height to 25px.
  5. 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

Ravi Vishwakarma

15-Jul-2021

How to make 8 Point Burst Shape in CSS?


<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <style type='text/css'>

        body{

            text-align:center;

            display: flex;

            flex-direction:column;

            justify-content: center;

            align-items: center;

        }

            body div {

                margin: 50px;

            }

.point8 {

            margin-top:150px;

            width:200px;

            height:200px;

            background-color:gray;

            position:relative;

            display:block;

        }

            .point8::before {

                width:200px;

            height:200px;

            position:absolute;

            display:block;

            content:'';

            background-color:gray;

            transform:rotate(45deg);

            }

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='point8'>  </div> 8 Point Shapes <br />

</body>

</html>


Liked By