Страницы

Поиск по вопросам

четверг, 25 октября 2018 г.

Как сделать clip-path (-webkit-) кроссбраузерным?

На Toster задали вопрос как создать такую вёрстку (скрин):
Разумеется я это сделал (топорно):
* { margin: 0; padding: 0; } section { display: table; width: 950px; min-width: 950px; max-width: 950px; margin: auto; } span { display: inline-block; padding: 90px; background: red; -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%); } .wrapper2 { margin: -46px 91px; } .wrapper3 { margin-left: 180px; margin-top: 1px; }


Но больше всего раздражает что это не кроссбраузерно , каким образом можно добиться что бы пример работал везде ?
http://codepen.io/Geyan/pen/OXKQVo?editors=110


Ответ

Сделал, без clip-path, за счет наклоненных субэлементов.
* { font-family: sans-serif; font-size: 16px; } .btn { background-color: #fb1; border-radius: 4px; border: 1px solid #707020; color: #000; font-size: 12px; padding: 6px 15px; text-decoration: none; transition: background-color 0.1s; } a.btn:hover { background-color: #bada55; } a.btn:active { background-color: #707020; } .hexagon { background-color: #888; background-position: center; display: inline-block; height: 110px; position: relative; width: 190px; z-index: 0; } .hexagon.bg-1 { background-image: url('http://lorempixel.com/g/220/220/nightlife/1'); } .hexagon.bg-2 { background-image: url('http://lorempixel.com/g/220/220/nightlife/2'); } .hexagon.bg-3 { background-image: url('http://lorempixel.com/g/220/220/nightlife/3'); } .hexagon.bg-4 { background-image: url('http://lorempixel.com/g/220/220/nightlife/4'); } .hexagon.bg-5 { background-image: url('http://lorempixel.com/g/220/220/nightlife/5'); } .hexagon.bg-6 { background-image: url('http://lorempixel.com/g/220/220/nightlife/6'); } .hexagon.bg-7 { background-image: url('http://lorempixel.com/g/220/220/nightlife/7'); } .hexagon.bg-8 { background-image: url('http://lorempixel.com/g/220/220/nightlife/8'); } .hexagon.bg-9 { background-image: url('http://lorempixel.com/g/220/220/nightlife/9'); } .hexagon > .face1, .hexagon > .face2 { backface-visibility: hidden; background: inherit; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -1; } .hexagon > .face1:before, .hexagon > .face2:before { background: inherit; content: ''; height: 220px; left: -15px; position: absolute; top: -50%; transform-origin: center; width: 220px; z-index: -2; } .hexagon > .face1 { transform: rotate( 60deg); } .hexagon > .face1:before { transform: rotate(-60deg); } .hexagon > .face2 { transform: rotate(-60deg); } .hexagon > .face2:before { transform: rotate( 60deg); } .hexagon:after, .hexagon > .face1:after, .hexagon > .face2:after { background-color: rgba(0, 50, 100, 0.5); content: ''; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -2; } .hexagon > .body { display: table; height: 100%; width: 100%; } .hexagon-body { display: table-cell; padding: 0 20px 20px; text-align: center; vertical-align: bottom; white-space: normal; } .hexagon-body > p { color: #fff; font-weight: bold; margin: 0 0 12px; text-shadow: 0 0 4px #000; } .hexagon-row { margin-top: 54px; white-space: nowrap; } .hexagon-row.four { margin-left: 0; } .hexagon-row.three { margin-left: 97px; } .hexagon-row.two { margin-left: 194px; } .hexagon-row.one { margin-left: 291px; } .hexagon-container { padding: 6px 0 54px; }

Ремонт квартир

Заказать

Ремонт коттеджей и домов

Заказать

Ремонт небоскребов и дворцов

Заказать

Ремонт коммерческих и производственных помещений

Заказать

Ремонт

Заказать

Ремонт

Заказать

Ремонт

Заказать

Ремонт

Заказать

Ремонт

Заказать

Ремонт

Заказать

Ремонт квартир

Заказать

Ремонт коттеджей и домов

Заказать

Ремонт небоскребов и дворцов

Заказать

Ремонт коммерческих и производственных помещений

Заказать

Текст следующей секции


Или посмотреть код на jsfiddle


.hexagon здесь - прямоугольник размерами 190px*110px. Где:
190px - ширина шестигранника от одной грани до другой 110px - длина грани шестигранника ("толщина" прямоугольника)
.face1 и .face2 - прямоугольники таких же размеров, но наклоненные - .face1 вправо на 60 градусов, .face2 - влево.
.hexagon.bg-1 { background-image: url('http://lorempixel.com/g/220/220/nightlife/1'); }
.hexagon > .face1, .hexagon > .face2 { background: inherit; } .hexagon > .face1:before, .hexagon > .face2:before { background: inherit; }
.face1 и .face2 наследуют свойство background-image от .hexagon за счет background: inherit
.hexagon > .face1, .hexagon > .face2 { overflow: hidden; } .hexagon > .face1:before, .hexagon > .face2:before { height: 220px; left: -15px; position: absolute; top: -50%; transform-origin: center; width: 220px; } .hexagon > .face1 { transform: rotate( 60deg); } .hexagon > .face1:before { transform: rotate(-60deg); } .hexagon > .face2 { transform: rotate(-60deg); } .hexagon > .face2:before { transform: rotate( 60deg); }
:before-блоки - квадратные c размером в 220px, выровненные по центру относительно блоков размером 190px*110px. 220px - это расстояние от одного угла шестигранника до противоположного. Таких размеров оптимально брать и изображение на фон.
:before-блоки заполняются тем же фоном, что и .hexagon, но фон специально смещается так, чтобы устранить эффект поворота блока. Например, .face1 поворачивается на 60 градусов вправо, а фон для него - на 60 градусов влево.
Таким образом при наложении фона .hexagon на фон .face1 и .face2 не видно искажений и швов (швы смягчаются за счет свойства backface-visibility: hidden;).
.hexagon { z-index: 0; } .hexagon > .face1, .hexagon > .face2 { z-index: -1; } .hexagon > .face1:before, .hexagon > .face2:before { z-index: -2; } .hexagon:after, .hexagon > .face1:after, .hexagon > .face2:after { background-color: rgba(0, 50, 100, 0.5); content: ''; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -2; }
:after-блоки затемняют и придают определенный оттенок изображению на фоне.
.hexagon > .body { display: table; height: 100%; width: 100%; } .hexagon-body { display: table-cell; vertical-align: bottom; }
Контент в шестиграннике размещается в .body > .hexagon-body
display: table и table-cell выравнивают контент по нижнему краю .hexagon. Если посмотреть ваш пример, можно заметить - кнопки расположены в одну линию, а многострочный текст идет от кнопки вверх.
Этого же эффекта можно добиться, задав для .hexagon-body абсолютное позиционирование и разместив его по нижнему краю. В этом случае уже не понадобится контейнер .body, но в этом случае рендер контента будет происходить вне основного потока, плюс изменится принцип выравнивания контента в экстремальном случае. Если при table-cell текст занимает столько строк, что не помещается в отведенное ему пространство до верха .hexagon - весь контент начинает выравниваться от верхнего края вниз. Это видно в моем примере - у крайнего правого шестигранника кнопка расположена ниже. При position: absolute текст продолжит уходить вверх, кнопка будет оставаться на месте.
.hexagon-row { margin-top: 54px; white-space: nowrap; } .hexagon-row.four { margin-left: 0; } .hexagon-row.three { margin-left: 97px; } .hexagon-row.two { margin-left: 194px; } .hexagon-row.one { margin-left: 291px; }
margin-top корректирует вертикальное выравнивание каждой новой строки с шестигранниками.
white-space: nowrap; гарантирует, что шестигранники не будут переноситься на следующую строку при нехватке ширины у контейнера.
Номерные классы означают количество шестигранников в строке. Используются для выравнивания по-горизонтали. С такими классами можно строить сетки не только неизбежно сужающиеся, но любых форм (видно в примере).
.hexagon-container { padding: 6px 0 54px; }
Корректируем отступ до верхней строки и после нижней.

Комментариев нет:

Отправить комментарий