CSS Drawing Special Graphics

First step: Draw the rectangle:

The second step: set the width to 0px;

The third step: the height is also set to 0px;

This becomes a div surrounded by four triangles; in essence, the div does not exist because it has a width and height of 0; Now we can set the various graphs as follows:

1, transparent color transparent;

The left is set to transparent;

The right side is also set to transparent: it becomes a funnel shape;

In the same way, the triangle is finally drawn;

2, the following to do a right triangle;

3, trapezoid;

4, draw a circle;

5. Draw an ellipse:

<! DOCTYPE html>"en">"UTF-8"> <title>Title</title> <style type="Text/css">div{width:300px;            height:300px; Background-Color:orange;            border:30px solid; Border-left-Color:blueviolet; Border-bottom-Color:brown; Border-right-Color:chartreuse; Border-top-Color:teal; float: Left; Margin-right:5px; }. dengyao{Width:0; Height:0; Background-color:transparent;            border:30px solid; Border-left-color:transparent; Border-bottom-Color:brown; Border-right-color:transparent; Border-top-color:transparent; }. zhijiao{Width:0; Height:0; Background-color:transparent;            border:30px solid; Border-left-Color:blueviolet; Border-bottom-Color:brown; Border-right-Color:chartreuse; Border-top-color:transparent; Margin-top:10px; Border-bottom:0; Border-left:0;            }. tixing{width:50px;            height:0px; Background-color:transparent;            border:30px solid; Border-left-color:transparent; Border-bottom-color:transparent; Border-right-color:transparent; Border-top-Color:teal; }. circle{border:0;            width:100px;            height:100px; Border-radius: -%;            }. tuoyuan{width:100px;            height:80px; Background-Color:salmon; border:0; Border-radius: -%; }    </style>class="Dengyao"></div> <divclass="Zhijiao"></div> <divclass="tixing"></div> <divclass="Circle"></div> <divclass="Tuoyuan"></div></body>
CSS Drawing Special Graphics