Use CSS3 to make squares, triangles, slices, and pie charts

1. Make a square with a border

If you set the width and height of the box container to 0 and set a thicker width value for each edge and a different color from each other, you will end up with four triangles, each pointing to a different color.

HTML code: <div id= "Square" >11</div>

CSS3 Code:

#square {
width:0;
height:0;
border-width:100px;
Border-style:solid;
Border-color:red Blue green yellow;
Line-height:99em;
Overflow:hidden;
Cursor:pointer;
margin:30px Auto;
}

Display effect:

Visible from the diagram, the four triangles point in different directions.

2. When we set the color of the three of the four triangles to be transparent or transparent, we can get a triangle

Html:

<div id= "Triangle" >11</div>

Css:

#triangle {
width:0;
height:0;
border-width:100px;
Border-style:solid;
border-color:red transparent transparent transparent;
Line-height:99em;
Overflow:hidden;
Cursor:pointer;
margin:30px Auto;
}

Effect:

3. You should be aware that the fillet attribute (Border-radius) is introduced in CSS3, and once this value is set, the border will appear rounded. Similarly, we have rounded corners of the squares to get a pie chart

Html:<div id= "Circle" >11</div>

Css:

#circle {

width:0;
height:0;
border-radius:100px;
border-width:100px;
Border-style:solid;
Border-color:red Blue green yellow;
Line-height:99em;
Overflow:hidden;
Cursor:pointer;
margin:30px Auto;

}

Effect:

4. We also set the transparent color of three of these frames to get a fan

Html:<div id= "Fan" >11</div>

Css:

#fan {

width:0;
height:0;
border-radius:100px;
border-width:100px;
Border-style:solid;
border-color:red transparent transparent transparent;
Line-height:99em;
Overflow:hidden;
Cursor:pointer;
margin:30px Auto;

}

Effect:

Use CSS3 to make squares, triangles, slices, and pie charts