Draw graphics with border-radious

Today only found thatBorder-radius can draw a lot of graphics, below with me to see it:

Draw a circle in the case of a width and height :

#div1 {        /* width height equal, fillet range is high or wide by half or more */            background-Color:green ;            width:120px;            height:120px;            Border-radius:60px;        }

Operation Result:

When the width and height are unequal :

#div1 {            /* is large in height, rounded to a width of half or more */            background-color:green;            width:120px;            height:80px;            Border-radius:60px;        }

Results:

Because Border-radius can accept different parameters , we can use this to draw an ellipse :

#div1 {            /*Border-radius accept values with different horizontal and vertical orientations, using/separating */            background- Color:green;            width:120px;            height:80px;            Border-radius:60px/40px;        }

Results:

An ellipse appears.

The above method of drawing circles and ellipses is very inflexible , if the width and height change, the shape will change, we want to use a flexible way to draw the shape we want to use the percentage :

#div1 {            /*Border-radius Accept percent, use/separate  flexible ellipse */            background- Color:green;            width:200px;            height:300px;             /* equivalent to border-radius:50%/50%; */             Border;        } 

Results:

You can also make a half circle or ellipse graph by modifying the value of Border-radius:

#div1 {            /*border-radius half ellipse */            background-color:green;            width:100px;            height:100px;         /* equivalent to Border-radius: Horizontal radius/vertical radius; */             border%/00;         

Operation Result:

#div1 {            /*border-radius half ellipse */            background-color:green;            width:100px;            height:100px;             /* equivalent to Border-radius: Horizontal radius/vertical radius; */             Border00%/;        }

Results:

One-fourth of the ellipse is also possible oh:

#div1 {            /*border-radius 1/4 half ellipse */            background-Color:green ;            width:100px;            height:100px;             /* equivalent to Border-radius: Horizontal radius/vertical radius; */             border%  0 0 0/%;        }

Results:

#div1 {            /*border-radius 1/4 half ellipse */            background-Color:green ;            width:100px;            height:100px;             /* equivalent to Border-radius: Horizontal radius/vertical radius; */             Border000/%;        }

Results:

To draw additional graphics :

#div1 {            /*border-radius half ellipse */            background-color:green;            width:100px;            height:100px;             /* equivalent to Border-radius: Horizontal radius/vertical radius; */             Border00/%;        }

#div1 {            /*border-radius half ellipse */            background-color:green;            width:100px;            height:100px;             /* equivalent to Border-radius: Horizontal radius/vertical radius; */             Border0(0)/%;        }

Operation Result:

#div1 {            /*border-radius half ellipse */            background-color:green;            width:100px;            height:100px;             /* equivalent to Border-radius: Horizontal radius/vertical radius; */             Border0/%;        }

You can modify the value of the Border-radius to see what will produce the graphics, here I will not write.

Draw graphics with border-radious