---
title: "How to make 8 Point Burst Shape in CSS?"
description: "How to make 8 Point Burst Shape in CSS?"
author: "Ethan Karla"
published: 2021-07-15
updated: 2023-06-10
canonical: https://www.mindstick.com/forum/156496/how-to-make-8-point-burst-shape-in-css
category: "css-css3"
tags: [".net", "html", "css-css3", "html5"]
reading_time: 3 minutes
---
# How to make 8 Point Burst Shape in CSS?
Give example of 8 Point [Burst](https://answers.mindstick.com/qa/50464/how-to-use-burst-mode-on-your-iphone-x-take-view-and-save-burst-photos) Shape .
## Replies
### Reply by Aryan Kumar
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
```plaintext
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.
### Reply by Ravi Vishwakarma
\
```
Animation Demo
8 Point Shapes
```
\
---
Original Source: https://www.mindstick.com/forum/156496/how-to-make-8-point-burst-shape-in-css
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.