PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

First, I went to find a simple picture of fireworks and found that the main structure was distorted line structure.

Solution a:

Curved lines are the first response to “rounded edges” :

``````    width: 200px;
height: 200px;
border: rosybrown 100px solid;
Copy the code``````

By controlling the size of the rounded corner, different curves can be obtained. However, how to hide the extra lines is a problem.

Scheme 2:

`````` background-image: radial-gradient(rgba(255, 0, 0, 1), rgba(0, 128, 0, 1), rgba(0, 0, 255, 1));
Copy the code``````

When the radius of the gradient between two adjacent colors is very small, it is hard to see the gradient effect, and it almost becomes a dividing line:

``````background-image: radial-gradient(red 50px, green 51px, #a9a9bb 52px);
Copy the code``````

The inner core of the radial gradient is circular by default, but it can also be set:

``````   background: radial-gradient(
circle at 0 0,
transparent 150px,
black 151px,
transparent 152px
);
Copy the code``````

That’s the simplest curve.

Scheme 2 is obviously better than Scheme 1, so radial gradient is used to make:

Part of the code

``````    background: radial-gradient(
circle at 0 0,
transparent 147px,
#fcc593 151px,
transparent 155px
),
circle at 47px 89px,
transparent 148px,
#f9dbd3 151px,
transparent 154px
),
circle at -10px -50px,
transparent 146px,
#b9c76d 151px,
transparent 154px
),