CSS implements a variety of basic graphics

Triangle

When writing CSS, used the background map, ignoring the CSS itself can actually achieve a lot of simple basic graphics, such as triangles:

. triangle {    border-style:solid;    border-width:20px;    Border-color: #000 transparent transparent;    width:0px;    height:0px;}

：

Qijie, why is the width of the height of 0, but can show a triangle? The usual border, looks like four straight lines, in fact, modify the triangular code, showing its two edges as an example:

. triangle {    border-style:solid;    border-width:20px;    Border-color: #000 blue transparent transparent;    width:50px;    height:50px;}

：

Suddenly, the original frame is actually isosceles trapezoid !

So what other graphics can you do (the following code is excerpted from the shapes of CSS)?

Circular

#circle {    width:200px;    height:200px;    background:red;    -moz-border-radius:50%;    -webkit-border-radius:50%;    border-radius:50%;}

The main use of border-radius attributes, the rectangle rounded. The value can use a length ( px ) or a percentage. The percentages are converted to lengths, as in this example, 50% 水平圆角半径=宽度*50% , 垂直圆角半径=高度*50% so direct write 100px is also equivalent.

Parallelogram

#parallelogram {    width:150px;    height:100px;    -webkit-transform:skew (160deg);       -moz-transform:skew (160deg);         -o-transform:skew (160deg);    background:red;}

Use the transform tilt characteristics as follows:

• Tilt the 160° to the x-axis (horizontal right): You can imagine that the right edge of the rectangle is rotated counterclockwise 160° (when 90° is rotated, the four edges coincide, the graph disappears, and when the rotation exceeds 90°, it resembles symmetry; when the rotation exceeds 180°, it resembles a circle)

• Tilt to the y-axis (horizontal downward), and you can imagine that the bottom edge of the rectangle is rotated in a clockwise direction.

Five-angle shape

It's time to raise the difficulty, let's see how to draw the five-angle shape ️? The pentagram can be seen as being composed of three isosceles triangle.

The triangle three angles are 36°, 36°, 108° respectively, at this time draw the pentagram equivalent to draw three triangles. The method mentioned at the beginning of the article can only draw angle fixed isosceles triangle. Carefully researched border , the angle is actually controllable, as follows:

  width:10px;  height:10px;  Border-right:  100px solid green;  border-bottom:70px  solid red;  border-top:20px  solid blue;  Border-left:   50px solid black;

By setting a different length for the border, the shape of the border is affected: in the case of a red triangle, the bottom edge is long border-left + border-right ; the cosine theorem of high School learning: The shape of the triangle can be determined by the angle of the known triangle and the length of any side. So theoretically, p border it is possible to achieve different size triangles by controlling the length of a three bar. In practice, because it is difficult to get an integer value, it is almost impossible to draw a positive five-angle shape by this method.

The original code is as follows ( it's amazing how the original author calculated these border widths ):

#star-five {margin:50px 0;   position:relative;   Display:block;   color:red;   width:0px;   height:0px;   border-right:100px solid Transparent;   border-bottom:70px solid red;   border-left:100px solid Transparent;   -moz-transform:rotate (35DEG);   -webkit-transform:rotate (35DEG);   -ms-transform:rotate (35DEG); -o-transform:rotate (35deg);}   #star-five:before {border-bottom:80px solid red;   border-left:30px solid Transparent;   border-right:30px solid Transparent;   Position:absolute;   height:0;   width:0;   Top: -45px;   Left: -65px;   Display:block;   Content: ";   -webkit-transform:rotate ( -35DEG);   -moz-transform:rotate ( -35DEG);   -ms-transform:rotate ( -35DEG); -o-transform:rotate ( -35deg);}   #star-five:after {position:absolute;   Display:block;   color:red;   top:3px;   Left: -105px;   width:0px;   height:0px;   border-right:100px solid Transparent;   border-bottom:70px solid red; border-left:100px Solid TranSparent;   -webkit-transform:rotate ( -70DEG);   -moz-transform:rotate ( -70DEG);   -ms-transform:rotate ( -70DEG);   -o-transform:rotate ( -70DEG); Content: ';}

Other interesting graphics

Diamond

A combination of a trapezoid and a triangle

Pac Man

A circle that hides the right side

dialog box

A triangle, plus a rounded rectangle

Triangle

When writing CSS, used the background map, ignoring the CSS itself can actually achieve a lot of simple basic graphics, such as triangles:

. triangle {    border-style:solid;    border-width:20px;    Border-color: #000 transparent transparent;    width:0px;    height:0px;}

：

Qijie, why is the width of the height of 0, but can show a triangle? The usual border, looks like four straight lines, in fact, modify the triangular code, showing its two edges as an example:

. triangle {    border-style:solid;    border-width:20px;    Border-color: #000 blue transparent transparent;    width:50px;    height:50px;}

：

Suddenly, the original frame is actually isosceles trapezoid !

So what other graphics can you do (the following code is excerpted from the shapes of CSS)?

Circular

#circle {    width:200px;    height:200px;    background:red;    -moz-border-radius:50%;    -webkit-border-radius:50%;    border-radius:50%;}

The main use of border-radius attributes, the rectangle rounded. The value can use a length ( px ) or a percentage. The percentages are converted to lengths, as in this example, 50% 水平圆角半径=宽度*50% , 垂直圆角半径=高度*50% so direct write 100px is also equivalent.

Parallelogram

#parallelogram {    width:150px;    height:100px;    -webkit-transform:skew (160deg);       -moz-transform:skew (160deg);         -o-transform:skew (160deg);    background:red;}

Use the transform tilt characteristics as follows:

• Tilt the 160° to the x-axis (horizontal right): You can imagine that the right edge of the rectangle is rotated counterclockwise 160° (when 90° is rotated, the four edges coincide, the graph disappears, and when the rotation exceeds 90°, it resembles symmetry; when the rotation exceeds 180°, it resembles a circle)

• Tilt to the y-axis (horizontal downward), and you can imagine that the bottom edge of the rectangle is rotated in a clockwise direction.

Five-angle shape

It's time to raise the difficulty, let's see how to draw the five-angle shape ️? The pentagram can be seen as being composed of three isosceles triangle.

The triangle three angles are 36°, 36°, 108° respectively, at this time draw the pentagram equivalent to draw three triangles. The method mentioned at the beginning of the article can only draw angle fixed isosceles triangle. Carefully researched border , the angle is actually controllable, as follows:

  width:10px;  height:10px;  Border-right:  100px solid green;  border-bottom:70px  solid red;  border-top:20px  solid blue;  Border-left:   50px solid black;

By setting a different length for the border, the shape of the border is affected: in the case of a red triangle, the bottom edge is long border-left + border-right ; the cosine theorem of high School learning: The shape of the triangle can be determined by the angle of the known triangle and the length of any side. So theoretically, p border it is possible to achieve different size triangles by controlling the length of a three bar. In practice, because it is difficult to get an integer value, it is almost impossible to draw a positive five-angle shape by this method.

The

Source code is as follows ( it's amazing how the original author calculated these border widths ):

#star-five {margin:50px 0;   position:relative;   Display:block;   color:red;   width:0px;   height:0px;   border-right:100px solid Transparent;   border-bottom:70px solid red;   border-left:100px solid Transparent;   -moz-transform:rotate (35DEG);   -webkit-transform:rotate (35DEG);   -ms-transform:rotate (35DEG); -o-transform:rotate (35deg);}   #star-five:before {border-bottom:80px solid red;   border-left:30px solid Transparent;   border-right:30px solid Transparent;   Position:absolute;   height:0;   width:0;   Top: -45px;   Left: -65px;   Display:block;   Content: ";   -webkit-transform:rotate ( -35DEG);   -moz-transform:rotate ( -35DEG);   -ms-transform:rotate ( -35DEG); -o-transform:rotate ( -35deg);}   #star-five:after {position:absolute;   Display:block;   color:red;   top:3px;   Left: -105px;   width:0px;   height:0px;   border-right:100px solid Transparent;   border-bottom:70px solid red; border-left:100px Solid TranSparent;   -webkit-transform:rotate ( -70DEG);   -moz-transform:rotate ( -70DEG);   -ms-transform:rotate ( -70DEG);   -o-transform:rotate ( -70DEG); Content: ';}

Other interesting graphics

Diamond

A combination of a trapezoid and a triangle

Pac Man

A circle that hides the right side

dialog box

A triangle, plus a rounded rectangle