Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

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

 В этом уроке мы будем делать шестигранник, который будет иметь фоновое изображение. Для этого будем использовать средства  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

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

 

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




Комментарии

  1. newkamikaze
    Thumb up Thumb down +10

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

    Надеюсь, кому-то пригодиться.

    Ответить

    Андрей Ответ:

    Thumb up Thumb down 0

    можешь скинуть свои исходники?

    Ответить

  2. prowka
    Thumb up Thumb down -3

    Комментарий скрыт из-за рейтинга

    Ответить

  3. hellal
    Thumb up Thumb down 0

    вижу класс hex-gap в css, но не вижу его в html. для чего тогда прописаны стили?!?

    Ответить

Оставить ответ


− 2 = три

Вставить изображение