Introduction to CSS3 new features and methods for drawing common graphics

Preface: I am planning to make my own web page recently. In the design draft Navigation I plan to design it into a rectangle, and there are also rectangles displayed in hover style, with some avatars and so on. In addition to drawing circles, I have never really drawn other shapes seriously before. Today I will draw a few common shapes we see.

Before this, we need to understand what a pseudo element is (different from it, there is another concept called pseudo class, the two are easy to confuse), without which graphics cannot be drawn. .

a) Pseudo elements: used to insert additional elements before and after content elements. The reason why they are called pseudo elements is that they are not generated in the document at all and can only be visible externally. For example: when you F12, Can you see it in the code box on the right?

Two pseudo-elements used here ①Before the element:before ②After the element:after

1) Circle, no If necessary, 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;/*这里的100px 就是三角形在竖直方向上高度 也就是三角形的高*/
        /*border-left: 100px solid #96D1DF;/* 还可以写不同方向上的三角形 */
        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 /* 这个层叠顺序要设置下 不然看到的圆柱顶部不美观 看着就不想圆柱了 */
    }
.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

Draw Pentagram, we first need to know that "deg" in the styles followed by several private prefixes of the browser represents the rotation angle. For example, "45deg" represents a 45-degree clockwise rotation, and negative represents counterclockwise.

rotate is one of attributes of transform, which represents 2D rotation, that is, two-dimensional rotation. It also has three-dimensional rotation, transformThere are several other features. If used well, the special effects produced are 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和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);/* 逆时针旋转35度 */
				　　　　　　-ms-transform: rotate(-35deg);
				　　　　　　-o-transform: rotate(-35deg);
			　　　　}
/* HTML */
<div class="wujiaox"></div>

When drawing a five-pointed star, please note that you must set a content: ""; Otherwise you will not be able to see the style displayed by the pseudo-class elements; both pseudo-class elements must be set to absolute positioning, and the parent element is set to relative.

4) Chat box

<span style="color: #000000">/* CSS */<br/>　　　　　　.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;
            }            <br/>/* HTML */<br/><p class="chatBox"></p> </span>

5) The Bagua diagram is actually a large semicircle + 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 */<p class="bagua"></p>

6) "Masonry" graphics

First draw a right-angled 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 */<p class="zhuanshi"></p>

There are many graphic methods in CSS3 The method requires you to study it slowly. Although it is rarely used, it is still quite interesting to draw when you are bored.

The above is the detailed content of Introduction to CSS3 new features and methods for drawing common graphics. For more information, please follow other related articles on the PHP Chinese website!