Use clip-path to draw polygons

There’s a great website: bennettfeely.com/clippy/ (probably accelerators) that describes the “clip-path” property of CSS3. You can drag and change it, and you can make almost any shape except the Bates curve (hollow parts should be combined).

Using clip-path to draw polygons is much easier than using pseudo-elements to create polygons. It is also possible to draw more than an octagon in a single div. Using pseudo-elements to draw polygons directly starts with the length and width, while using clip-path to draw the coordinates of each point. In order to create regular polygons, we also need to use many basic trigonometric functions to calculate coordinates. Here we use clip-path to draw circles, ellipses and regular polygons.

Before you start drawing, there are two things to note:

• Clip-path is used to draw in the same direction, clockwise and counterclockwise, because polygon is a continuous line segment. If the lines intersect each other, the area will be subtracted (of course, if this is what you want).
• If the “scale” method is used when drawing, the length and width must be set in advance, otherwise there may be a difference between the length and width drawn and what we imagine. There is no such problem when using “pixel” drawing.

Circle (radius at center coordinates)

.circle{
    width:100px;
    height:100px;
    background:#0cc;
    -webkit-clip-path:circle(50% at 50% 50%);
  }
Copy the code

Ellipse (long and short axis radius at center coordinates)

 .ellipse{
    width:100px;
    height:100px;
    background:#aaa;
    -webkit-clip-path:ellipse(25% 50% at 50% 50%);
  }
Copy the code

Built-in rectangle inset (top right bottom left margin round top right bottom left rounded corner

.inset{
    width:100px;
    height:100px;
    background:#99f;
    -webkit-clip-path:inset(5% 10% 15% 20% round 20% 5% 50% 0);
  }
Copy the code

Is a triangle

 .a{
    width:100px;
    height:87px;
    background:#c00;
    -webkit-clip-path:polygon(0% 100%.50%  0%.100% 100%);
  }
Copy the code

A square

.b{
    width:100px;
    height:100px;
    background:# 069;
    -webkit-clip-path:polygon(0% 0%.0% 100%.100% 100%.100% 0%);
  }
Copy the code

Is pentagon

The regular pentagon is calculated, 59/ (59+95) =38.31%, 31/ (81*2) =19.14%

.c{ width:162px; height:154px; background:#095; - its - clip - path: polygon (0%, 38.31% and 50% 0%, 100%, 38.31% and 80.86% 100%, 19.14%, 100%); }Copy the code

And so on, many patterns can be drawn

Refer to the link