Use pure CSS to achieve triangles, rounded triangles, circles…

preface

Recently when looking at the interview questions of major factories found that most of the interviewees like to use pure CSS to achieve triangles, circles and other graphs, so write down this note to record

Pure CSS implements triangles

border

Let’s look at what a border width of 50px looks like when width height is 0

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

.triangle {
    width: 0px;
    height: 0px;
    border-top: 50px solid red;
    border-right: 50px solid green;
    border-bottom: 50px solid blue;
    border-left: 50px solid yellow;
}
Copy the code

This way, we can set the color of the other three sides to Transparent, leaving the bottom triangle

.triangle {
    width: 0;
    height: 0;
    border-bottom: 50px solid # 565656;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
Copy the code

Clip – cutting path

The clip-path attribute uses clipping to create a displayable area of the element. The part inside the region is displayed, and the part outside the region is hidden.

There are four types of clip-path syntax:

• Inset (define rectangle)
• Circle (define a circle)
• Ellipse (define ellipse)
• Polygon (define polygon)

The value of polygon is composed of multiple coordinate points, the first coordinate value is x direction, the second coordinate value is y direction. The top left corner is the origin, and the bottom right corner is the point (100%,100%)

.triangle {
    width: 100px;
    height: 100px;
    background: cyan;
    clip-path: polygon(0 100%.50% 0.100% 100%); }}Copy the code

Pure CSS implements rounded triangles

First draw a rounded border, turn it into the head of a rounded triangle by rotation and distortion, and then transform it into the two base angles of the triangle by rotation of pseudo-elements

<div class="rounded-triangle"></div>
Copy the code

.rounded-triangle {
    width: 50px;
    height: 50px;
    border-top-right-radius: 30%; // Rounded Angle radianbackground: cyan;
    transform: rotate(-60edg) skewX(-30edg) scale(1.866)}.rounded-triangle:before,
    .rounded-triangle:after {
      content: ' ';
      position: absolute;
      background-color: inherit;
      width:  50px;
      height: 50px;
      border-top-right-radius: 30%;
    }
    .rounded-triangle:before {
      transform: rotate(-135deg) skewX(-45deg) scale(1.414.707) translate(0, -50%);
    }
    .rounded-triangle:after {
      transform: rotate(135deg) skewY(-45deg) scale(.707.1.414) translate(50%);
    }
Copy the code

Pure CSS implements circles

border-radius

In fact, the attributes of border-top-left-radius are border-top-right-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius Abbreviation mode, therefore, border-radius: 30px; , is equivalent to border-radius: 30px 30px 30px 30px;

We can then use 50% as the border-radius value, which produces the vertical and horizontal radii by multiplying the length and width of the object

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

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: cyan;
}
Copy the code

If you use border-radius to generate a circle, make sure the div’s width and height are equal, or if they are not, it will be drawn as an oval

clip-path

Using clip-path circle syntax, the value of circle consists of a circle center and radius

.circle {
  width: 100px;
  height: 100px;
  background: cyan;
  clip-path: circle(50% at 50% 50%);    /* Center of the circle (50% 50%) Radius 50% */
}
Copy the code

Recommended reading

1. Clip-path clipping for CSS3 (Triangles, polygons, circles, ellipses)
2. This section describes how to use the clip-path property of the CSS
3. Use CSS to draw basic shapes such as triangles, trapezoids, sectors, arrows, and ellipses