Подскажите пожалуйста, как лучше сверстать в данном случае, соты?
Я верстал подобное, но там были одинаковые бордеры (Приложил код).
В данном же случае, все куда труднее и у меня нет особо идей как это лучше сделать.
И второй вопрос, как грамотно спозиционировать эти блоки, чтобы потом не сильно костылить медиа запросами?
.benefits__wrapper {
text-align: center;
padding-top: 3.9881vw;
padding-bottom: 15px; }
.benefits__heading {
margin-bottom: 6.84524vw; }
.benefits__items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@media screen and (max-width: 759px) {
.benefits__items {
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
@media screen and (max-width: 759px) {
.benefits__item {
width: 40%;
margin: 20px 0; } }
@media screen and (max-width: 459px) {
.benefits__item {
width: 100%; } }
.item {
text-align: center;
margin-right: 40px; }
@media screen and (max-width: 459px) {
.item {
margin-right: 0; } }
.item:last-child {
margin-right: 0; }
.item__title {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font: 1.25rem/1 "PFEncoreSansPro-Regular";
color: #868686;
margin-bottom: 34px; }
.item__info {
font: 0.9375rem/1.125rem "PFEncoreSansPro-Thin";
color: #adadad;
margin-bottom: 3.03571vw; }
.hexagon {
margin: 0 auto 54px; }
.hexagon__icon {
fill: #fff;
-webkit-transition: background-color .35s;
transition: background-color .35s; }
.hexagon,
.hexagon__item_inner {
position: relative;
width: 91px;
height: 52px;
background-color: #fe8682;
-webkit-transition: background-color .35s;
transition: background-color .35s; }
.hexagon:before,
.hexagon:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fe8682;
-webkit-transition: background-color .35s;
transition: background-color .35s; }
.hexagon:before,
.hexagon__item_inner:before {
-webkit-transform: rotate(120deg);
transform: rotate(120deg); }
.hexagon:after,
.hexagon__item_inner:after {
-webkit-transform: rotate(60deg);
transform: rotate(60deg); }
.hexagon__item_inner {
position: absolute;
left: 0;
top: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
background-color: #fc635e;
z-index: 1; }
.hexagon__item_inner:before,
.hexagon__item_inner:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: background-color .35s;
transition: background-color .35s;
background-color: #fc635e; }
.hexagon__content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 1; }
.hexagon:hover,
.hexagon:hover:before,
.hexagon:hover:after {
background-color: #fc635e; }
.hexagon:hover .hexagon__item_inner,
.hexagon:hover .hexagon__item_inner:before,
.hexagon:hover .hexagon__item_inner:after {
background-color: #fff; }
.hexagon:hover .hexagon__icon {
fill: #fc635e; }
<section class="benefits">
<div class="benefits__wrapper container">
<div class="benefits__heading">
<div class="heading_usual">
<div class="heading__title uppercase">What can
<div class="span heading_active">you receive?</div>
</div>
<div class="heading__subtitle">
Daisy is sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a
sit amet mauris. Morbi accumsan ipsum
</div>
</div>
</div>
<div class="benefits__items">
<article class="benefits__item item">
<div class="hexagon">
<div class="hexagon__item_inner"></div>
<div class="hexagon__content">
<svg class="hexagon__icon icon_xl">
<use xlink:href="svg/sprite.svg#rocket"></use>
</svg>
</div>
</div>
<div class="item__title uppercase">Clents</div>
<div class="item__info">
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean</div>
</article>
<article class="benefits__item item">
<div class="hexagon">
<div class="hexagon__item_inner"></div>
<div class="hexagon__content">
<svg class="hexagon__icon icon_xl">
<use xlink:href="svg/sprite.svg#web-design"></use>
</svg>
</div>
</div>
<div class="item__title uppercase">branding</div>
<div class="item__info">
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean</div>
</article>
<article class="benefits__item item">
<div class="hexagon">
<div class="hexagon__item_inner"></div>
<div class="hexagon__content">
<svg class="hexagon__icon icon_xl">
<use xlink:href="svg/sprite.svg#diagram"></use>
</svg>
</div>
</div>
<div class="item__title uppercase">marketing</div>
<div class="item__info">
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean</div>
</article>
<article class="benefits__item item">
<div class="hexagon">
<div class="hexagon__item_inner"></div>
<div class="hexagon__content">
<svg class="hexagon__icon icon_xl">
<use xlink:href="svg/sprite.svg#speaker"></use>
</svg>
</div>
</div>
<div class="item__title uppercase">adv.</div>
<div class="item__info">
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean</div>
</article>
</div>
У SVG решения есть ряд преимуществ:
IE11
, Edge
Пошаговая инструкция:
Для получения точной привязки контуров фигур к фоновой картинке загружаем картинку в векторный редактор и присваиваем значения svg в соответствии с габаритными размерами картинки.
width="1330" height="880" viewBox="0 0 1330 880"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1330" height="880" viewBox="0 0 1330 880" preserveAspectRatio="xMinYMin meet" >
<image xlink:href="https://i.stack.imgur.com/cb744.png" width="100%" height="100%" />
</svg>
В векторном редакторе с помощью инструмента - Рисовать кривые Безье
и прямые отрезки
наносим узловые точки по контурам красной линии и шестиугольников
path
общей
линии и шестиугольников. Добавляем в каждый шестиугольник текст, который позиционируем
координатами X,
Y`
<text class="txt1" x="355" y="400" > STEP
<tspan dx="0">1 </tspan></text>
Добавляем картинку в шестиугольник с помощью pattern
<pattern
id="pattern"
x="0px" y="-255px"
width="341px"
height="382px"
patternUnits="userSpaceOnUse">
<image
xlink:href="https://i.stack.imgur.com/DSbkL.jpg"
width="341px"
height="382px"
/>
</pattern>
<g id="crc1">
<circle r="23" fill="#FC635E"/>
<text x="-15" y="15" fill="white" font-size="36" >✔</text>
</g>
Ниже полный пример кода, добавил анимацию общей линии
.h1{
fill-opacity:0.6;
}
.h2 {
fill-opacity:0.9;
}
.txt1 {
font-size:32px;
fill:#595959;
text-decoration: underline;
font-weight:500;
}
.txt2 {
font-size:20px;
fill:#444444;
font-weight:500;
}
tspan {
fill:#FC635E;
font-weight:500;
font-size:36px;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 1330 880" >
<defs>
<pattern
id="pattern"
x="0px" y="-255px"
width="341px"
height="382px"
patternUnits="userSpaceOnUse">
<image
xlink:href="https://i.stack.imgur.com/DSbkL.jpg"
width="341px"
height="382px"
/>
</pattern>
<pattern
id="pattern2"
x="40px" y="-380px"
width="304px"
height="343px"
patternUnits="userSpaceOnUse">
<image
xlink:href="https://i.stack.imgur.com/hZrmI.jpg"
width="304px"
height="343px"
/>
</pattern>
<g id="crc1">
<circle r="23" fill="#FC635E" />
<text x="-15" y="15" fill="white" font-size="36" >✔</text>
</g>
</defs>
<image xlink:href="https://i.stack.imgur.com/LC31J.jpg" width="100%" height="100%" />
<g fill="#FEFEFE" stroke="gray" stroke-width="2">
<path id="hex_1" class="h1" d="m402.1 321 106.8 60.6v121.3l-106.8 64.6-106.8-64.6V381.7ZM731.7 381.7l104.1 60.6" />
<path id="hex_2" class="h1" d="m731.7 381.7 104.1 60.6v125.2l-104.1 64.6-106.8-64.6V442.3Z" />
<path id="hex_3" class="h2" fill-opacity="0.6" style="fill:url(#pattern2);" d="m1099.5 289.4 163.5 92.3V567.6L1099.5 658.5 940 567.6V381.7l159.5-92.3" />
<path class="h2" fill-opacity="0.9" style="fill:url(#pattern);" d="m508.9 503 160.8 94.9V782.4L508.9 876 349.4 782.4V597.9l159.5-94.9M835.8 199.7l104.1 62" class="s0"/>
<path class="h1" d="m835.8 199.7 104.1 62v120l-104.1 60.6-104.1-60.6V261.7Z" class="s0"/>
</g>
<path id="progress" fill="none" stroke-width="4" stroke="red" stroke-dashoffset="1975" stroke-dasharray="1975"
d="m295.3 381.7 106.8-60.6 106.8 60.6v121.3l116 64.6 0-125.2 106.8-60.6V261.7l104.1-62 104.1 62v120l159.5-92.3 163.5 92.3v185.9l-163.5 91" >
<animate attributeName="stroke-dashoffset" dur="10s" values="1975;0" fill="freeze"/>
</path>
<text class="txt1" x="355" y="400" > STEP
<tspan dx="0">1 </tspan></text>
<text class="txt2" x="312" y="450"> Разработка проекта</text>
<text class="txt2" x="300" y="490"> Согласование проекта </text>
<text class="txt1" x="425" y="725" > STEP
<tspan dx="0">2 </tspan></text>
<text class="txt1" x="680" y="450" > STEP
<tspan dx="0">3 </tspan></text>
<text class="txt2" x="670" y="500"> Нулевой цикл</text>
<text class="txt2" x="640" y="540"> Возведение коробки </text>
<text class="txt1" x="790" y="280" > STEP
<tspan dx="0">4 </tspan></text>
<text class="txt2" x="750" y="330"> Монтажные работы</text>
<text class="txt2" x="750" y="370"> Отделочные работы </text>
<text class="txt1" x="1150" y="430" > STEP
<tspan dx="0">5 </tspan></text>
<use xlink:href="#crc1" x="300" y="380" />
<use xlink:href="#crc1" x="628" y="440" />
<use xlink:href="#crc1" x="735" y="255" />
<use xlink:href="#crc1" x="945" y="385" />
<use xlink:href="#crc1" x="1100" y="655" />
</svg>
CSS решение этого учебного топика можно найти по ссылке, которую указал @UModeL
Сценарий анимации
Реализовать такой сценарий не трудно, так как все анимации будут следовать друг за другом и лишь одна анимация рисования общей линии длится в течение всей анимации.
Эта анимация реализована на изменении атрибута stroke-dashoffset
от максимального значения длины линии 1975px
до нуля.
Остальные анимации появления текста, иконок основаны на изменении прозрачности.
Ниже полный код. Анимация начинается после клика на кнопку - Start
.h1 {
fill-opacity:0.6;
}
.h2 {
fill-opacity:0.9;
}
.txt1 {
font-size:32px;
fill:#595959;
text-decoration: underline;
font-weight:500;
fill-opacity:0.2;
}
.txt2 {
font-size:20px;
fill:#444444;
font-weight:500;
fill-opacity:0.2;
}
tspan {
fill:#FC635E;
font-weight:500;
font-size:36px;
fill-opacity:1;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 1330 880" >
<defs>
<pattern
id="pattern"
x="0px" y="-255px"
width="341px"
height="382px"
patternUnits="userSpaceOnUse">
<image
xlink:href="https://i.stack.imgur.com/DSbkL.jpg"
width="341px"
height="382px"
/>
</pattern>
<pattern
id="pattern2"
x="40px" y="-380px"
width="304px"
height="343px"
patternUnits="userSpaceOnUse">
<image
xlink:href="https://i.stack.imgur.com/hZrmI.jpg"
width="304px"
height="343px"
/>
</pattern>
<g id="crc1" >
<circle r="23" fill="#FC635E" />
<text x="-15" y="15" fill="white" font-size="36" >✔</text>
</g>
</defs>
<!-- Картинка фона -->
<image xlink:href="https://i.stack.imgur.com/LC31J.jpg" width="100%" height="100%" />
<!-- Блок шестиугольников -->
<g fill="#FEFEFE" stroke="gray" stroke-width="2">
<path id="hex_1" class="h1" d="m402.1 321 106.8 60.6v121.3l-106.8 64.6-106.8-64.6V381.7ZM731.7 381.7l104.1 60.6" />
<path id="hex_2" class="h1" d="m731.7 381.7 104.1 60.6v125.2l-104.1 64.6-106.8-64.6V442.3Z" />
<path id="hex_3" class="h2" fill-opacity="0.6" style="fill:url(#pattern2);" d="m1099.5 289.4 163.5 92.3V567.6L1099.5 658.5 940 567.6V381.7l159.5-92.3" />
<path id="h2" class="h2" fill-opacity="0.9" style="fill:url(#pattern);" d="m508.9 503 160.8 94.9V782.4L508.9 876 349.4 782.4V597.9l159.5-94.9M835.8 199.7l104.1 62" class="s0"/>
<path class="h1" d="m835.8 199.7 104.1 62v120l-104.1 60.6-104.1-60.6V261.7Z" class="s0"/>
</g>
<path id="progress" fill="none" stroke-width="4" stroke="#FC635E" stroke-dashoffset="1975" stroke-dasharray="1975"
d="m295.3 381.7 106.8-60.6 106.8 60.6v121.3l116 64.6 0-125.2 106.8-60.6V261.7l104.1-62 104.1 62v120l159.5-92.3 163.5 92.3v185.9l-163.5 91" >
<animate id="an_Line" attributeName="stroke-dashoffset" begin="btn.click" dur="20s" values="1975;0" fill="freeze"/>
</path>
<text class="txt1" id="s1" x="355" y="400" > STEP
<tspan dx="0">1 </tspan></text>
<text id="s11" class="txt2" x="312" y="450"> Разработка проекта</text>
<text id="s111" class="txt2" x="300" y="490"> Согласование проекта </text>
<text id="s2" class="txt1" x="425" y="725" > STEP
<tspan dx="0">2 </tspan></text>
<text id="s3" class="txt1" x="680" y="450" > STEP
<tspan dx="0">3 </tspan></text>
<text id="s33" class="txt2" x="670" y="500"> Нулевой цикл</text>
<text id="s333" class="txt2" x="640" y="540"> Возведение коробки </text>
<text id="s4" class="txt1" x="790" y="280" > STEP
<tspan dx="0">4 </tspan></text>
<text id="s44" class="txt2" x="750" y="330"> Монтажные работы</text>
<text id="s444" class="txt2" x="750" y="370"> Отделочные работы </text>
<text id="s5" class="txt1" x="1150" y="430" > STEP
<tspan dx="0">5 </tspan></text>
<!-- Блок красных иконок -->
<g fill-opacity="0.2">
<use id="u1" xlink:href="#crc1" x="300" y="380" />
<use id="u3" xlink:href="#crc1" x="628" y="440" />
<use id="u4" xlink:href="#crc1" x="735" y="255" />
<use id="u5" xlink:href="#crc1" x="945" y="385" />
<use id="u55" xlink:href="#crc1" x="1100" y="655" />
</g>
<!-- Анимация текста шестиугольника STEP1 -->
<animate id="an_s1"
xlink:href="#s1" attributeName="fill-opacity" dur="1s" begin="an_Line.begin+1s" values="0.2;1" fill="freeze" />
<animate id="an_s11"
xlink:href="#s11" attributeName="fill-opacity" dur="1s" begin="an_s1.end" values="0.2;1" fill="freeze" />
<animate id="an_s111"
xlink:href="#s111" attributeName="fill-opacity" dur="1s" begin="an_s11.end" values="0.2;1" fill="freeze" />
<!-- Анимация иконки шестиугольника STEP1 -->
<animate id="an_u1" xlink:href="#u1" attributeName="fill-opacity" dur="1s" begin="an_s111.end" values="0.2;1" fill="freeze" />
<!-- Анимация текста шестиугольника STEP2 -->
<animate id="an_s2"
xlink:href="#s2" attributeName="fill-opacity" dur="1s" begin="an_s111.end" values="0.2;1" fill="freeze" />
<!-- Анимация текста шестиугольника STEP3 -->
<animate id="an_s3"
xlink:href="#s3" attributeName="fill-opacity" dur="1s" begin="an_s2.end" values="0.2;1" fill="freeze" />
<animate id="an_s33"
xlink:href="#s33" attributeName="fill-opacity" dur="1s" begin="an_s3.end" values="0.2;1" fill="freeze" />
<animate id="an_s333"
xlink:href="#s333" attributeName="fill-opacity" dur="1s" begin="an_s33.end" values="0.2;1" fill="freeze" />
<!-- Анимация иконки STEP3 -->
<animate id="an_u3" xlink:href="#u3" attributeName="fill-opacity" dur="1s" begin="an_s333.end" values="0.2;1" fill="freeze" />
<!-- Анимация текста шестиугольника STEP4 -->
<animate id="an_s4"
xlink:href="#s4" attributeName="fill-opacity" dur="1s" begin="an_s333.end" values="0.2;1" fill="freeze" />
<animate id="an_s44"
xlink:href="#s44" attributeName="fill-opacity" dur="1s" begin="an_s4.end" values="0.2;1" fill="freeze" />
<animate id="an_s444"
xlink:href="#s444" attributeName="fill-opacity" dur="1s" begin="an_s44.end" values="0.2;1" fill="freeze" />
<!-- Анимация иконки STEP4 -->
<animate id="an_u4"
xlink:href="#u4" attributeName="fill-opacity" dur="1s" begin="an_s444.end" values="0.2;1" fill="freeze" />
<animate id="an_u5"
xlink:href="#u5" attributeName="fill-opacity" dur="1s" begin="an_u4.end+1s" values="0.2;1" fill="freeze" />
<!-- Анимация текста шестиугольника STEP5 -->
<animate id="an_s5"
xlink:href="#s5" attributeName="fill-opacity" dur="1s" begin="an_s444.end+5s" values="0.2;1" fill="freeze" />
<!-- Анимация второй иконки после завершения рисования линии STEP5 -->
<animate id="an_u55"
xlink:href="#u55" attributeName="fill-opacity" dur="1s" begin="an_Line.end" values="0.2;1" fill="freeze" />
<g id="btn" transform="translate(0 -100) scale(2)">
<rect x="20" y="84" width="35" height="15" rx="5" fill="none" stroke="purple"/>
<text x="28" y="95" font-size="10" fill="purple" >Start</text>
</g>
</svg>
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
как сделать чтоб при нажатии на кнопку назад скрол был на другую страницу с якорем #links123Откуда собственно и начинался переход