Создаем шестиугольник с помощью чистого CSS3

4 апреля 2013 | Опубликовано в css | 6 Комментариев »

В этом уроке мы будем делать шестигранник, который будет иметь фоновое изображение. Для этого будем использовать средства CSS3. С помощью трансформаций css3 мы можем поворачивать и делать различные манипуляции элементов DOM. Для этого будем использовать otate и masking. В области стилей урок может показаться немного сложным, но он объяснен иллюстрациями. Давайте приступим.

Демо Скачать исходные файлы

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;
    }

Демо Скачать исходные файлы

Автор: Kevin Liew

Перевод: Дежурка

Смотрите также:

Опубликовано в css, апреля 4, 2013
Метки: css, css3, геометрические фигуры css3, уроки css, шестиугольник css3

�

newkamikaze
10 апреля 2013 в 15:04
+11

ЗдОрово! Решил использовать в своём сайте и сделал размер ячеек адаптивным. Для этого вписал каждый шестигранник в квадратный div. Ширину этому div'у выставляю в процентах, а высоту скриптом такую же, как и шириы. Элементам шестигранника размер тоже указываю в процентах: ширина — 100%, высота — 58%.
Надеюсь, кому-то пригодиться.

Андрей Ответ:
июля 28, 2016 at 3:36 пп

+1

можешь скинуть свои исходники?
prowka
9 июля 2013 в 6:47
-3

Комментарий скрыт из-за рейтинга
можно и так
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon: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;
}
#hexagon: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;
}
hellal
19 декабря 2014 в 16:05
+1

вижу класс hex-gap в css, но не вижу его в html. для чего тогда прописаны стили?!?
Ostrova.mobi
3 мая 2017 в 10:27
0

К сожалению, счастье получается неполным — ссылочным объемом для каждого 6-угольника является только прямоугольник внутри. Есть предположение, что наложение 3-х площадей решит дело, но при первом рассмотрении красивым это не выглядит.