Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

draw

Eat eggs every day, so let’s use CSS to draw an egg.

The container

<div class="egg"></div>
Copy the code

To draw the egg pattern, we need to prepare a div element, and then it will be transformed.

style

A normal egg should be about 5CM high and 3.5CM in diameter. So we give the aspect ratio of the container as: 3:5.

Before drawing the egg pattern, we need to look at the border-radius property as it is the key to our drawing.

border-radius

Let’s start with an example:

.demo{
    width: 100px;
    height: 100px;
    background-color: red;
     /* is equivalent to 10% 20% 30% 40%/10% 20% 30% 40%, i.e. horizontal/vertical half axis */
    border-radius: 10% 20% 30% 40%;
}
Copy the code

The four values of this property are used clockwise from the top left to the bottom left.

  1. If the value is one: indicates that all four angles are of this value.
  2. If the values are two: the diagonal values are the same, for example:a b === a b a b .
  3. If the value is three: indicates that the second value is the same as its opposite Angle, for example:a b c === a b c b .
  4. If the value is four, it works clockwise.

The value of this property: can be a specific value or percentage, but neither can be negative.

The semicircular and semicircular axes of the circular radius or ellipse are defined numerically.

Percentage Uses percentages to define the semi-major and semi-minor axes of a circle radius or ellipse. It is worth noting that the width of the horizontal axis relative to the box model; The height of the vertical half axis relative to the box model. In other words, when our container is different in width and height, it will bend x% differently.

egg

We know that eggs are small at the top and big at the bottom and round at both ends. So we need to set the horizontal axis of the four angles to 50%, and the first two vertical angles are greater than the last two.

.egg {
    --size: 100px;
    width: var(--size);
    height: calc(var(--size) * 5 / 3);
    border-radius: 50%/60% 60% 40% 40%;
    background-color: #fca;
    box-shadow: 0 calc(var(--size) * -0.2) calc(var(--size) * 0.15) rgba(200.80.0.3) inset;
}
Copy the code

conclusion

Note the use of the border-radius attribute when drawing the egg pattern. The size of the egg varies with –size.

For other animation effects, head over to the Funny Animation column, which I hope will help you.