Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how css3 writes irregular pentagons". In daily operation, I believe many people have doubts about how css3 writes irregular pentagons. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to write irregular pentagons by css3". Next, please follow the editor to study!

Write: 1, use the "border: length solid transparent;border-right: height solid color" statement to set the element to the triangle style; 2, use the "margin:value" statement to set the triangle element and a triangle with the same width of the rectangular element spacing to 0.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How to write irregular Pentagon by css3

In css, to write an irregular Pentagon, we first need to create a triangle and a rectangular element with the same width as the triangle, and then eliminate the gap between the two elements, when a triangle and a rectangle are spliced into an irregular Pentagon.

Examples are as follows:

Pentagon # triangle-left {width: 0; height: 0; border-top: 50px solid transparent; border-right: 50px solid red; border-bottom: 50px solid transparent; float: left;} # left {width: 200px; height: 100px; background: red; margin-left: 50px;}

Output result:

At this point, the study on "how to write irregular pentagons by css3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.