Css draw shape, css draw

Css draw shape, css draw

Finally, my freshman year is over, and a pleasant summer vacation begins. I have been busy with some projects and finally decided to update my blog today. I will make a brief summary of the previous study.

This time I will mainly summarize the techniques of using Css to draw various shapes. At the same time, I will combine the before and after pseudo elements and positioning to make some results.

　　

Triangle Up (Up Triangle)

　　　

1 #triangle-up{2　   width: 0;3     height:0;4     border-left:50px solid transparent;5     border-right: 50px solid transparent;6     border-bottom: 70px solid #81cfa2;7  }

Triangle Down (downward Triangle)

　　

1 #triangle-down {2      width: 0;3      height: 0;4      border-left: 50px solid transparent;5      border-right: 50px solid transparent;6      border-top: 70px solid #81cfa2;7  }

Triangle Left (Triangle to the Left)

　　

 

#triangle-left{       width: 0;       height:0;       border-right: 70px solid #81cfa2;       border-top: 50px solid transparent;       border-bottom:50px solid transparent;}

　　　　

Triangle TopRight (Triangle on the right)

 

#triangle-topright {      width: 0;      height: 0;      border-top: 100px solid #81cfa2;      border-left: 100px solid transparent;}

The triangle implementation is relatively simple. Similarly, you can obtain some other triangles. To draw a triangle, the other width and height are both 0, and then use transparent to set the transparency of other parts. However, you must learn how to combine the before and after pseudo elements in your project and make some combination effects, for example, I am working on a project in the Oppo community (My Gif software has some problems)

　　

Here I paste the code for creating a triangle in the navigation bar okaychen

However, IE6 does not support the transparent attribute, but we can solve this problem by setting the border-style attribute of the corresponding transparent border to dotted or dashed.

Next, I will summarize several common Css plot shapes (combined with the before and after pseudo elements): Talk Bubble (chat box)

 1 #talkBubble{ 2     width: 120px; 3     height: 80px; 4     background: #81cfa2; 5     position: relative; 6     border-radius: 10px; 7     -webkit-border-radius: 10px; 8     -moz-border-radius: 10px; 9 }10 #talkBubble:before{11     content: "";12     position: absolute;13     right: 100%;14     top: 26px;15     width: 0;16     height: 0;17     border-top: 13px solid transparent;18     border-right: 26px solid #81cfa2;19     border-bottom: 13px solid transparent;20 }

 

Heart (Heart-shaped)

 1 #Heart { 2         position: relative; 3         width: 100%; 4         height: 90px; 5     } 6      7     #Heart:before, 8     #Heart:after { 9         content: "";10         position: absolute;11         left: 50px;12         top: 0;13         width: 50px;14         height: 80px;15         background: #FE4C40;16         -moz-border-radius: 50px 50px 0 0;17         border-radius: 50px 50px 0 0;18         -webkit-transform: rotate(-45deg);19         -moz-transform: rotate(-45deg);20         transform: rotate(-45deg);21         -webkit-transform-origin: 0 100%;22         -moz-transform-origin: 0 100%;23         transform-origin: 0 100%;24     }25     26     #Heart:after {27         left: 0;28         -webkit-transform: rotate(45deg);29         -moz-transform: rotate(45deg);30         transform: rotate(45deg);31         -webkit-transform-origin: 100% 100%;32         -moz-transform-origin: 100% 100%;33         transform-origin: 100% 100%;34     }

　　　　

Css can draw a lot of shapes you don't think of. mastering some common css drawing techniques can help you easily in the project.

In the next phase, I will focus on node learning. I hope I can summarize a node blog this summer, instead of just taking a large number of notes on makedown.