На 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;
}
Корректируем отступ до верхней строки и после нижней.
