Sometimes we need to decorate standard boxes into boxes of various shapes, such as circle, triangle, trapezoid, fan, etc. This article is mainly used to record the note to realize these graphics

Standard box

  1. If we define the width and height of a box, and then define different styles for each border, let’s see what the effect is.
	HTML CODE: 
      

        square 
      
 */
    
    /* CSS CODE */
   .square {
      width: 100px;
      height: 100px;
      border-top: 50px solid red;
      border-right: 50px solid green;
      border-bottom: 50px solid orangered;
      border-left: 50px solid blue;
    }
Copy the code

Page display:

Draw ladder

Display analysis: from the display image, we can see that the border appears trapezoid, so it is easy to draw trapezoid, just need to set the other border color to transparent

  <style>
    .trapezoidal{
        width: 100px;
        height: 100px;
        border: 50px solid transparent;
        border-bottom-color: tomato;
    }
  </style>
    
  <div class="trapezoidal"></div>
Copy the code

If we were to draw a triangle, we could try changing the above code to the following code to see what happens

HTML CODE: 
      

        square 
      
 */
    
    /* CSS CODE */
   .square {
      width: 0;
      height: 0;
      border-top: 50px solid red;
      border-right: 50px solid green;
      border-bottom: 50px solid orangered;
      border-left: 50px solid blue;
    }

Copy the code

Page display:Display analysis: we can see that there are triangles in this shape, so we can set the other three border color to transparent, and then set the other border color to non-transparent to achieve the triangle

Draw a triangle

/* HTML CODE 

/* CSS CODE */
.triangle {
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-bottom-color: purple;
}
Copy the code

The page display

Painting fan

We simply add border-radius to the triangle elements to round the corners

/* HTML CODE 

/* CSS CODE */
   .sector {
      width: 0;
      height: 0;
      border-radius: 50%;
      border: 50px solid transparent;
      border-bottom-color: red;
    }
Copy the code

A graphical representation

circular

/* HTML CODE 

/* CSS CODE */
   .circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: green;
    }
Copy the code

A graphical representation

semicircle

/* HTML CODE 
      

        half circle 
      
 */

/* CSS CODE */
 .half-circle {
      width: 100px;
      height: 50px;
      background-color: blue;
      border-top-left-radius: 50px; 
      border-top-right-radius: 50px;
 }
Copy the code

Display effect