crimson hexagon

This time to everyone to bring CSS how to make hexagon pictures, CSS to make hexagon pictures of what to note, the following is the actual case, together to see. This article mainly introduces the CSS implementation of Hexagon image sample code, share to everyone, as follows: Do not say anything else, first on the effect: With a simple p with pseudo-elements, y

This time to everyone to bring CSS how to make hexagon picture, CSS to make hexagon picture of what to note, the following is the actual case, together to see. With a simple div with pseudo-elements, you can ' draw ' this hexagon image, the principle is three identical wide-height div, by positioning the rotation to create a

A few days ago when browsing the Web page accidentally found a hexagonal mask effect (in fact, DNF official website to see), today a whim to restore a hexagonActually the first to do hexagon my idea is to use:: Before and:: After1 . Box2{2 width:400px;3 Height:400px;4 Border:1px solid Black;5 position:relative;6}7 . six4{8 width:100px;9 Height:173px;Ten position:Absolute; One Top:50px; A Left:100px; - background:Rgba (0,0,255,0.3); -} the . Six4::bef

Do not say anything else, first on the effect:With a simple div with pseudo-elements, you can ' draw ' this hexagon image, the principle is three identical wide-height div, by positioning the rotation to create a hexagon, and then use the background map stacked to form a visual image of the whole picture. Let's take a step-by-step implementation.(1) So the first step, of course, is to draw the container, wh

Brief tutorials This is a cool Hexagon menu animation effect made with CSS3 and a small amount of JS code. The Hexagon menu has a high-gloss animation effect when the mouse is over, and when the menu is clicked, each menu item pops out along the sides of the hexagon, forming a large hexagon. Use method HTML structure

Reprint please indicate the source: Wang 亟亟 's way of DanielA series of recent articles are some of the custom control of the drawing, animation and other effects, this piece directly to do a custom view, the address of the previous article: http://blog.csdn.net/ddwhan0123/article/details/50477030 (not see the small partners can see)As a rule, stick to the demo.Package Structure: Design analysis Yellow for the whole of the entire control, the green part of the drawing out of the

Test instructions: In order to give a hexagon of each internal angle is 120° six edge length, the hexagon can be decomposed into how many side length of 1 units of the triangle.The Unit Triangle area is regarded as 1, in fact, the hexagonal area is asked. Randomly looking for the hexagon of the three edges, respectively, with the three edge for the basis of the e

.hex_top_triangle{width:0;border-bottom:30px solid #6C6;border-left:52pxsolidtransparent; border-right:52pxsolidtransparent;}. hex_center_rect{width:104px;height:60px; background-color: #6C6;}. hex_bottom_triangle{width:0;border-top:30px solid #6C6;border-left:52pxsolidtransparent; border-right:52pxsolidtransparent;}. float{float:left;margin-left:1px; margin-bottom:-29px;}. row_even{clear:left;margin-left:52px;/ *margin-top:30px;*/}.hex_even{float:left;margin-left:1px;} The imitation of the hone

In the normal layout of the page, we will often encounter the Honeycomb briquette type of module:So we take him apart, is a single hexagon, how to use CSS to achieve a hexagon? Here are the steps I use to implement the hexagon with the CSS drawn by the drawing software:The specific HTML code is as follows:　　CSS implementation equilateral

Give the length of a hexagon six (each corner of the hexagon is 120 degrees), and find out how many of the equilateral triangle in this hexagon have a 1 edge length.Since each corner is 120 degrees and the upper and lower sides are parallel, we can make up a rectangle and subtract the area of the surrounding four corners, dividing the area of each small triangle