Я завантажив з Інтернету кілька зображень на мій сайт. Чи можна надати всім цим образам шестигранную форму в responsive grid.
Я знайшов кілька способів зробити це, але мені необхідно заповнити src зображення в коді CSS. Це не підходить мені, тому що сайт завантажує випадкові зображення з інтернету з jQuery. тому я не можу їх використовувати як фонові зображення.
Я збираюся підтримувати WebKit браузери, Firefox, IE8 було б добре, але не треба - і мобільні браузери
Цей метод використовує:
тег
- невпорядкований список: кожен шестикутник міститься в тезі
- і тезі
- Використання transform rotate і skew. щоб зробити шестигранні форми
- overflow: hidden;
дочірні елементи nth-child () заповнюють шестигранник як pattern
І ще, щоб створити шестигранную сітку з тегом .
Характеристики шестигранною сітки:
Сітка буде реагувати, як це годиться, на зміну відсотків ширини. Шестикутники підтримують своє співвідношення сторін відповідно до прийомом padding-bottom technique і зображення змінюють розмір, щоб відповідати формі шестикутника.
hover ефект поверх шестикутників: текст ковзає з прозорим накладенням над зображенням.
повний код
Наступний фрагмент коду не є останньою версією сітки. GitHub repo зберігається і до теперішнього часу. Питання і вклади можуть бути зроблені там.
Зміна кількості шестикутників в ряду
Якщо вам не потрібні media queries. але просто хочете змінити кількість шестикутників в рядку, то ви можете зберегти CSS з відповідного media queries і потім видалити непотрібні з них.
Для отримання списку всіх демок, подивіться цю колекцію на codepen: Responsive grids of hexagons з різним числом шестикутників в кожному ряду, а також опції центрування і багато іншого.
Ось оригінал codepen demo з .pusher елементом, щоб зробити неправильну сітку з шестикутників. pusher елемент використовується для створення "дірок" в сітці з порожніми шестикутниками.