Skip to content

Instantly share code, notes, and snippets.

@MkShaman

MkShaman/hexagon

Created December 16, 2015 08:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MkShaman/ade208dd0e8ec99afe05 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MkShaman/ade208dd0e8ec99afe05 to your computer and use it in GitHub Desktop.
Download ZIP
html and css code for hexagon and links for example
Raw
hexagon
HTML
Этот шестиугольник может иметь два разных стиля. Это может быть текстовый контент или обычное изображение. Разметка HTML достаточно проста.
Как видим из разметки, у нас есть два блока DIV corner-1 и corner-2, которые мы будем поворачивать на 60 градусов для получения нужной формы.
<div class="hex hex-3">
<div class="inner">
<h4>CONTACT US</h4>
<hr />
<p>We Open Everyday</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/2.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
CSS
Стили CSS будут немного сложнее, чем разметка. Наш шестиугольник будет иметь шесть ребер и углы по 60 градусов. Шестиугольник будем строить с помощью трех прямоугольников. Как видим с картинки ниже, прямоугольники будем вращать на 60 градусов таким образом, чтобы получить шестиугольник.
Чтобы заставить фоновое изображение отображаться правильно, нужно прописать другие стили. Поскольку мы вращаем наши блоки, фоновое изображение будет также вращаться. Чтобы исправить это, используем :before, чтобы дублировать содержание, повернуть его обратно и замаскировать его overflow:hidden.
.hex {
width:150px;
height:86px;
background-color: #ccc;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: auto 173px;
position: relative;
float:left;
margin:25px 5px;
text-align:center;
zoom:1;
}
.hex.hex-gap {
margin-left: 86px;
}
.hex a {
display:block;
width: 100%;
height:100%;
text-indent:-9999em;
position:absolute;
top:0;
left:0;
}
.hex .corner-1,
.hex .corner-2 {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background: inherit;
z-index:-2;
overflow:hidden;
backface-visibility: hidden;
}
.hex .corner-1 {
z-index:-1;
transform: rotate(60deg);
}
.hex .corner-2 {
transform: rotate(-60deg);
}
.hex .corner-1:before,
.hex .corner-2:before {
width: 173px;
height: 173px;
content: '';
position: absolute;
background: inherit;
top:0;
left: 0;
z-index: 1;
background: inherit;
background-repeat:no-repeat;
backface-visibility: hidden;
}
.hex .corner-1:before {
transform: rotate(-60deg) translate(-87px, 0px);
transform-origin: 0 0;
}
.hex .corner-2:before {
transform: rotate(60deg) translate(-48px, -11px);
bottom:0;
}
/* Custom styles*/
.hex .inner {
color:#eee;
}
.hex h4 {
font-family: 'Josefin Sans', sans-serif;
margin:0;
}
.hex hr {
border:0;
border-top:1px solid #eee;
width:60%;
margin:15px auto;
}
.hex p {
font-size:16px;
font-family: 'Kotta One', serif;
width:80%;
margin:0 auto;
}
.hex.hex-1 {
background: #74cddb;
}
.hex.hex-2 {
background: #f5c53c;
}
.hex.hex-3 {
background: #80b971;
}
http://www.dejurka.ru/css/hexagon_shapes_with_pure_css3/
Решил использовать в своём сайте и сделал размер ячеек адаптивным. Для этого вписал каждый шестигранник в квадратный div. Ширину этому div'у выставляю в процентах, а высоту скриптом такую же, как и шириы. Элементам шестигранника размер тоже указываю в процентах: ширина — 100%, высота — 58%.
Надеюсь, кому-то пригодиться.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment