Introduction of common graphical methods for drawing new features of CSS3

Foreword: Recently prepared to make a own web page, the design manuscript navigation I prepare to design the rectangle, also has the hover style to display the rectangle, among them some avatars and so on. In addition to drawing a circle, it seems that I did not seriously draw other graphics, today we often see a few graphics.

Before this we need to understand what is pseudo-element (and it is different, there is a concept called Pseudo-class, both easy to confuse), without it can not draw graphics.

A) pseudo-elements: used to insert additional elements before and after content elements, which is called pseudo-elements, they are not generated in the document, can only be externally visible, such as: When you F12, in the right-hand code box is not visible?

Here are the two pseudo-elements used before the ① element: After the Before② element: after

1) round, no need, let's look at the triangle

/* CSS */.sanjiao {        width:0px;        height:0px;        margin:30px Auto;        position:relative;        border:100px solid transparent;        border-bottom:100px solid #3C98D1;/* Here 100px is the triangle in the vertical direction height is the triangle high */        /*border-left:100px solid #96D1DF; * * You can also write triangles in different directions */        border-right:100px solid #5E5E5E;        border-top:100px solid #3C98D1; */    }/* HTML */<p class= "Sanjiao" ></p>

2) Cylinder

/* CSS */.yuanzhu {       position:relative;       height:200px;       width:50px;       Background: #5E5E5E;       margin:30px Auto;       z-index:999/* This cascade order should be set under otherwise see the top of the cylinder is not looking at the column is not want to * * *    }.yuanzhu:before {position:absolute;　　　　Top: -10px;　　　　Content: "";　　　　width:50px;　　　　height:20px;　　　　border-radius:50%;　　　　Background: #A8A8A8;　　　　z-index:99}.yuanzhu:after {position:absolute;　　　　Bottom: -10px;　　　　Content: "";　　　　width:50px;　　　　height:20px;　　　　border-radius:50%;　　　　Background: #5E5E5E; Z-index:9}/* HTML */<div class= "Yuanzhu" ></div>

3) Pentagram

To draw a pentagram, we must first know the browser a few private prefixes followed by the style of "deg" represents the rotation angle, such as "45deg" means that the clockwise rotation of 45 degrees, negative means counterclockwise.

rotate is one of the properties of transform , that is, 2D rotation, that is, two-dimensional rotation, it also has three-dimensional rotation,transform There are several other features, with good, made out of the special effects It's still pretty high.

/* CSS */.wujiaox {width:0px;         height:0px;         position:relative;         margin:30px Auto;         border:100px solid Transparent;         border-bottom:70px solid #5E5E5E; -webkit-transform:rotate (35DEG);/* Safari and Chrome */-moz-transform:rotate (35DEG);/* Firefox */-ms-transform : Rotate (35DEG);/* IE 9 */-o-transform:rotate (35DEG);　　　　　　/* Opera */}. wujiaox:after {content: "";　　　　　　width:0px;　　　　　　height:0px;　　　　　　Display:block;　　　　　　border-right:100px solid Transparent;　　　　　　border-bottom:70px solid #5E5E5E;　　　　　　border-left:100px solid Transparent;　　　　　　Position:absolute;　　　　　　top:3px;　　　　　　Left: -105px;　　　　　　-webkit-transform:rotate ( -70DEG);　　　　　　-moz-transform:rotate ( -70DEG);　　　　　　-ms-transform:rotate ( -70DEG);　　　-o-transform:rotate ( -70DEG);　　　　　　}. Wujiaox:before {content: "";　　　　　　width:0;　　　　　　height:0;　　　　　　border-bottom:80px solid #5E5E5E;　　　　　　border-left:30px solid Transparent; Border-right:30px solid Transparent;　　　　　　Position:absolute;　　　　　　Top: -45px;　　　　　　Left: -65px;　　　　　　-webkit-transform:rotate ( -35DEG);　　　　　　-moz-transform:rotate ( -35DEG);/* Rotate 35 degrees Counterclockwise */-ms-transform:rotate ( -35DEG);　　　　-o-transform:rotate ( -35DEG); }/* HTML */<div class= "Wujiaox" ></div>

When you draw a pentagram, be aware that you must set a content: ""; Otherwise, you can't see the style represented by the pseudo-class element, and the two pseudo-class elements are set to absolute positioning, and the parent element is set relative.

4) Chat Box

/* CSS */
. chatbox {                width:200px;                height:50px;                margin:30px Auto;                Background: #5E5E5E;                border-radius:5px;                position:relative;            }                        . Chatbox:before {                content: "";                Position:absolute;                width:0px;                height:0px;                right:100%;                top:15px;                border-top:8px solid transparent;                border-right:10px solid #5E5E5E;                border-bottom:8px solid transparent;            }            
/* HTML */

5) Gossip map, in fact, is a large semicircle + two small circle composition

/* CSS */. Bagua {width:96px;                height:48px;                Background: #eee;                margin:30px Auto;                Border-color: #000000;                Border-style:solid;                border-radius:100%;                border-width:0.5px 0.5px 50px 0.5px;            position:relative;                }. Bagua:before {content: "";                border-radius:100%;                Background: #FFFFFF;                Position:absolute;                top:50%;                left:0px;                border:18px solid #000000;                width:12px;            height:12px;                }. Bagua:after {content: "";                border-radius:100%;                Background: #000000;                Position:absolute;                top:50%;                left:50%;                border:18px solid #eee;            width:12px;    height:12px; }/* HTML */<p class= "Bagua" ></p>

6) "Masonry" graphic

First, draw a right-angled trapezoid, and then draw a triangle below it by a pseudo-class element.

/* CSS */. Zhuanshi {                width:50px;                height:0;                Border-style:solid;                margin:30px Auto;                border-width:0 25px 25px 25px;                position:relative;                Border-color:transparent transparent #5E5E5E transparent;            }                        . Zhuanshi:after {                content: "";                width:0;                height:0;                Border-style:solid;                border-width:70px 50px 0 50px;                Border-color: #5E5E5E transparent transparent transparent;                Position:absolute;                top:25px;                Left: -25px;            } /* HTML */<p class= "Zhuanshi" ></p>

There are a lot of CSS3 in the way of graphics, you need to study slowly, although rarely used, but bored, to draw, or very interesting.