On the method of CSS3 drawing hexagon

Here is a simple implementation of CSS3 drawing hexagon. Content is very good, now share to everyone, but also for everyone to make a reference.

Because it's very simple, let's summarize: using CSS3 to draw hexagons mainly use pseudo-classes: Before and: after before and after the source element to draw two elements, and take advantage of the CSS3 border style , Turn these two elements into triangles and place them at both ends of the source element.

(because I have worked in a biological company before, I think the hexagon is closer to biological molecules, genes and other concepts, including our online search on biological molecules, genes and other images, many also have hexagonal style, so at that time on the page to do some functional navigation or tag, will feel the hexagon closer to some).

Full page effects such as: (in fact, multiple hexagon positioning into such a sub.) Of course, you can also set different hexagon color, so that you can better distinguish between different module functions.

We can propose a hexagon analysis, such as:

Know the analysis of ideas, we can first understand how to draw triangles, online examples are many, but no use of children's shoes do not have to look for, the following also gives code and examples, as follows:

：

CSS code:

. arrow{                 Display:inline-block;                 width:0px;                 height:0px;                 Border-style:solid;                 border-width:100px;　　Similar to padding and margin attributes, the order is upper, right, bottom, left                 border-color:red Blue Orange gray; Order is top, right, bottom, left}

HTML code:

<p class= "Arrow" ></p>

As said, using the border border property, fill in the color we do not want to be transparent color, you can get a certain part of the triangle, code and picture effect is as follows.

: (The triangle on the left is what we need, other settings for the transparent color)

CSS code:

. arrow{                 Display:inline-block;                 width:0px;                 height:0px;                 border-bottom:100px solid Transparent;　　　Set Transparent color                 border-top:100px solid transparent;　　Set Transparent color                 border-right:100px solid transparent; Set Transparent color                 border-left:100px solid gray;             }

HTML code:

<p class= "Arrow" ></p>

Okay. Know how to draw triangles, using CSS pseudo-classes: Before and: After will be able to complete the hexagon we want to draw.

: Before is inserting content in front of the element

: After is the content inserted after the element

If we want to insert some textual content, we can enter the text to be displayed in its content property, such as content: "HELLO World", but our example does not need to show extra information. We just need to place the before and after the two pseudo-elements into triangles into a fixed position.

Give the complete code as follows:

<! DOCTYPE html>
Hexagon drawing is actually a very simple effect, as long as we know how to draw triangles and use: before,:after Pseudo-class style. In the future, we can add more irregular graphics to the project.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!