#html5 #сss3 #clip_path
На 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
Ответы
Ответ 1
Сделал, без 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; } Корректируем отступ до верхней строки и после нижней.
Комментариев нет:
Отправить комментарий