Hello. I have a hexagon and I have several questions about it ( hexagon ) www.jsfiddle.net/m00qot3L/ Firstly, about positioning. It is located in the bootstrap container. Using margin 0 auto, he doesn’t want to center in any way. I used a flex container and leveled the content in the center. Can I do this? Just this whole conel with cross-browser ....

Secondly, you need to set the hexagon boundary. I asked it, but what happened ... How to make it whole without gaps?

  • Need option exactly html? Maybe you should use svg - Romanzhivo
  • The trouble is that I know nothing about him. So I will understand it. Say this section is also worth doing in SVG habrastorage.org/files/a31/813/204/… but I have no idea how to adapt it - Slivki show
  • svg is also XML-based markup, complex visual elements like line graphs, etc. are usually implemented using svg. This is no more complicated than html, you can also apply CSS styling to svg tags, only they have their own properties. The svg documentation can be found here developer.mozilla.org/ru/docs/Web/SVG If it is assumed that the layout is not rubber, but static, then you can make the red outlines for the hexagons just an image and impose through the background: url (); - Romanzhivo
  • Thank you =) I got to the Mozilla site and read it now. Another such guide found css-live.ru/articles/… - Slivki show

3 answers 3

In my svg you can at least how to apply, it can be crooked but as an option it suits

*{margin:0; padding:0;} .svg_elem{ display:table; margin:30px auto; } 
 <div class="svg_elem"> <svg style="width:250px;height:250px;"> <polygon points= "10 160, 10 80, 80 10, 175 10, 240 80, 240 160, 170 240, 70 240 " style="fill: yellow; fill-opacity:0.5; stroke-width:3px;stroke: black;" /> </svg> </div>

Cross-browser variant, pseudo-element through : for old browsers, through :: for new. Of course, you will have to tinker with the thickness of the stroke, I think you will understand, in the example I calculated the values ​​for the stroke at 2px

 .hex { width: 100px; height: 55px; background: red; position: relative; margin: 50px; } .hex:before, .hex::before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } .hex:after, .hex::after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; } .inner-hex { width: 96px; height: 55px; background: green; position: relative; margin: 50px 2px; } .inner-hex:before, .inner-hex::before { content: ""; position: absolute; top: -23px; left: 0; width: 0; height: 0; border-left: 48px solid transparent; border-right: 48px solid transparent; border-bottom: 23px solid green; } .inner-hex:after, .inner-hex::after { content: ""; position: absolute; bottom: -23px; left: 0; width: 0; height: 0; border-left: 48px solid transparent; border-right: 48px solid transparent; border-top: 23px solid green; z-index: 1; } 
 <div class="hex"> <div class="inner-hex"></div> </div>

    More as an option

    can i use

     .hex { width: 150px; height: 150px; background-color: #f00; position: relative; -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: 0.3s; } .hex-inner { position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; background: #ccc; -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .hex:hover{ background: #00f; } 
     <div class="hex"> <span class="hex-inner"></span> </div>