New Feature of CSS3, common drawing, and new feature of css3

New Feature of CSS3, common drawing, and new feature of css3

Recently, I am preparing to develop my own webpage. In the design draft, I plan to design a rectangle, a rectangle displayed in the hover style, and some portraits. In the past, apart from Circle painting, it seems that I have not drawn any other images seriously. Today I will draw several common images.

Before that, it is necessary to understand what a pseudo element is (unlike it, there is also a concept called pseudo-class, which is easy to confuse). Without it, it cannot draw a picture.

A) pseudo elements: used to insert additional elements before and after the content elements. The reason is that they are not generated in the document and can only be seen externally. For example: can you see it in the code box on the right at F12?

The two pseudo elements used here are: after

1) the circle is unnecessary. 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 height of the triangle in the vertical direction, that is, the height of the triangle * // * border-left: 100px solid # 96D1DF; /* You can also write triangles in different directions */border-right: 100px solid # 5E5E5E; border-top: 100px solid #3C98D1; * //}/* HTML */<div class = "sanjiao"> </div>

2) cylindrical

/* CSS */. yuanzhu {position: relative; height: 200px; width: 50px; background: # 5E5E5E; margin: 30px auto; z-index: 999/* set this cascade order. Otherwise, the top of the column is not beautiful and you don't want to see it */}

. 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 star, we need to first know that "deg" in the style after several private prefixes in the browser indicates the rotation angle. For example, "45deg" indicates the clockwise rotation of 45 degrees, negative values indicate a counter-clockwise.

RotateYesTransformOne of the attributes of, indicating 2D rotation, that is, 2D rotation, it also has 3D rotation,TransformThere are also a few features, you can look at the several features of http://www.w3school.com.cn/cssref/pr_transform.asp it, with good, made out of the special effect force grid is still quite 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>

Note that you must setContent :"";Otherwise, you will not see the style displayed by pseudo-class elements. Both pseudo-class elements must be set to absolute positioning, and the parent element must be set to 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 */
<div class="chatBox"></div> 

5) an octal chart is actually composed of a large half circle and two small circles.

/* 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 */<div class="bagua"></div>

6) "bricks and stones"

First draw a right-angle trapezoid, and then draw a triangle below it through pseudo-class Elements

/* 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 */<div class="zhuanshi"></div>

 

 

There are still many graphical methods in CSS3. You need to study them slowly. Although they are rarely used, it is quite interesting to draw images when you are bored.