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

This article will explain in detail how to write hexagons in css. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Css's method of writing hexagon: 1, divide the regular hexagon into three parts, and then set before part, p part and after part; 2, divide the regular hexagon into three p with the same width and height, and then use positioning and css3 transform:rotate to rotate 60deg to the left and right to form the regular hexagon.

This article operating environment: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

How does css write hexagon?

Teach you to draw regular hexagons with CSS

Talk about two ways to make regular hexagons with css.

Let's take a look at the results:

Before you know the relationship between the interior angle and the edge of a regular hexagon, each interior angle of a regular hexagon is 60deg, as shown in the figure (√ 3 is actually the root sign 3):

Method 1: the principle divides the regular hexagon into three parts, left, middle and right are: before part, p part, after part, as shown in the figure:

The before triangle part is the before pseudo element of p, and the after triangle part is the after pseudo element of p.

Html Code:

Css Code:

.p {position: relative; width: 50px; height: 86.6px; margin: 50px auto; background-color: red;} .p: before {content:'; display: block; position: absolute Width: 0; height: 0; right:50px; border-width: 43.3px 25px; border-style: solid; border-color: transparent red transparent transparent;} .p: after {content:'; display: block Position: absolute; width: 0; height: 0; left:50px; border-width: 43.3px 25px; border-style: solid; border-color: transparent transparent transparent red; top:0;}

Note that the width and height of p and pseudo elements need to be calculated according to the above formula.

Method 2: divide the regular hexagon into three p with the same width and height, and then use positioning and css3 transform:rotate to rotate the 60deg to the left and right to form a regular hexagon, as shown in the figure:

Html Code:

Css Code:

1. One {2 width: 50px; 3 height: 86.6px; 4 margin: 0 auto; 5 border-top: 1px solid red; 6 border-bottom: 1px solid red; 7} 8. Two {9 position: absolute;10 width: 50px 11 height: 86.6pxTip12 left: 25pxTip13 top: 0PX 14 transform: translate (- 50% 50%); 15 transform: rotate (60deg); 16 border-top: 1px solid red;17 border-bottom: 1px solid red 18} 19. Three {20 position: absolute;21 width: 50pxscape 22 height: 86.6pxscape 23 left: 25pxpolitics 24 top: 0There 25 transform: translate (- 50% rotate 50%); 26 transform: rotate (300deg) 27 border-top: 1px solid red;28 border-bottom: 1px solid red;29} this is the end of the article on "how to write hexagons in css". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.