DIV+CSS3 Drawing Basic Graphics

Basic graphics include: Rectangle, rounded rectangle, circle, ellipse, triangle, value line, arc

These graphs are drawn using CSS fillet properties, regardless of the IE8.

The following implementation runs through the Chrome browser.

1. Rectangle

It is simple to set the width, height and background color through CSS.

Html:

<class= "Rectangle"></div>

Css:

        . rectangle {            width:150px;            height:100px;            background-color:orangered;        }

Present:

2. Rounded Rectangle

On the basis of the rectangle setting, increase the Fillet property setting, the unit used here is the percentage, the benefit is adaptable to the change of the overall size.

Html:

<class= ' rounded-rectangle '></div>

Css:

        . rounded-rectangle {            width:150px;            height:100px;            background-color:orangered;            border-radius:10%;        }

Present:

3. Round

Set to square, the rounded corner is set to 50%, in fact, the radius of the fillet is the radius of the square.

Html:

<class= ' Circle '></div>

Css:

        . circle {            width:100px;            height:100px;            background-color:orangered;            border-radius:50%;        }

Present:

4. Ellipse

On the basis of a circle, set the square to a rectangle.

Html:

<class= ' ellipse '></div>

Css:

        . ellipse {            width:150px;            height:100px;            background-color:orangered;            border-radius:50%;        }

Present:

5. Triangles

At first glance at the appearance of the triangle, it is really impossible, there is no ready-made method one step finish, draw it needs to use the border characteristics, this is very interesting.

Html:

<class= ' triangle '></div>

decomposition 1:

Now let's take a look at the interesting border, make a square, the width of the height is set to 100px, set the width of the four-side border 10px, each side set a different color.

        . triangle{            width:100px;            height:100px;            Border-style:solid;            background-color:orangered;            border-top-color:red;            Border-right-color:green;            Border-bottom-color:blue;            Border-left-color:blueviolet;            border-top-width:10px;            border-bottom-width:10px;            border-left-width:10px;            border-right-width:10px;        }

After the presentation, it was interesting to see that the junction of the two border edges was a beveled edge,

Decomposition 2:

Continue, enlarge the width of each edge, set the square width height to 0px, set the width of each edge of the border to 50px (half of the original square width or height)

        . triangle{            width:0px;            height:0px;            Border-style:solid;            background-color:orangered;            border-top-color:red;            Border-right-color:green;            Border-bottom-color:blue;            Border-left-color:blueviolet;            50px;            50px;            50px;            50px;        }

Is not all sides are exposed triangle, the shape to come out, this is interesting border.

　　

Decomposition 3:

The final step is simple, the unwanted edges are transparent, leaving only the bottom edge, and transparent background.

        . triangle{            width:0px;            height:0px;            Border-style:solid;            Transparent;            Transparent;            Transparent;            Border-bottom-color:blue;            Border-left-color:transparent;            border-top-width:50px;            border-bottom-width:50px;            border-left-width:50px;            border-right-width:50px;        }

When you clear the edges and backgrounds, the required triangles come out, which is interesting.

If you want to make him an obtuse angle, the width of the bottom is smaller, if it is acute, increase the width.

If it is at right angles, set the width of the left or border to 0px.

Various triangles can be achieved by adjusting the width values of each side.

6. Straight Line

The straight line is simpler, and the compression height or width becomes a straight line.

Html:

<class= ' line '></div>

Css:

        . line{            width:100px;            height:3px;            background-color:orangered;        }

Present:

7. Arc

In essence, the use of rounded corners to achieve, now need to be the upper-left corner of the rectangle to draw an arc, then the right and bottom border width set to 0px, so that they are not visible, set the radius of the corner of the upper left corner, let it become larger, see more clearly, the rest of the radius of the fillet are all set to 0px

Html:

<class= ' Arc '></div>

Css:

        . arc {            width:100px;            height:100px;            Border-style:solid;            border-top-width:10px;            border-bottom-width:0px;            border-left-width:10px;            border-right-width:0px;            Border-top-color:blue;            border-bottom-color:red;            border-left-color:red;            border-right-color:red;            Transparent;            border-top-right-radius:0px;            border-top-left-radius:100px;            border-bottom-right-radius:0px;            border-bottom-left-radius:0px;        }

Present:

DIV+CSS3 Drawing Basic Graphics