Нужно сверстать подобный блок:
Я понимаю, что тут требуется SVG, но пока по быстрому сверстал эти элементы в лоб (элементы начинаются с "Сухие строительные смеси" и по часовой стрелке):
div.data {
height: 720px;
padding-top: 90px;
box-sizing: border-box;
position: relative;
}
ul {
width: 550px;
height: 530px;
margin: 0 auto;
position: relative;
}
ul li {
position: absolute;
z-index: 1;
}
ul li:hover {
z-index: 2;
}
ul li a {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
ul li a::before {
content: "";
width: 100%;
height: 100%;
background: url("/images/bg/bg-about-item.png") no-repeat center center;
transition: background 0.3s;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
ul li a:hover::before {
background: url("/images/bg/bg-about-item-hover.png") no-repeat center center;
}
ul li a span {
font-size: 16px;
color: #fff;
position: relative;
z-index: 2;
}
ul li:nth-child(1) {
top: 0;
right: 92px;
}
ul li:nth-child(2) {
top: 157px;
right: 0;
}
ul li:nth-child(3) {
bottom: 7px;
right: 92px;
}
ul li:nth-child(4) {
bottom: 7px;
left: 94px;
}
ul li:nth-child(5) {
top: 155px;
left: 4px;
}
ul li:nth-child(6) {
top: 0;
left: 94px;
}
<div class="data">
<ul>
<li>
<img src="/images/content/cat01.png" alt="" />
<a href="#!">
<span>Сухие строительные смеси</span>
</a>
</li>
<li>
<img src="/images/content/cat02.png" alt="" />
<a href="#!">
<span>Тротуарная плитка из бетона</span>
</a>
</li>
<li>
<img src="/images/content/cat03.png" alt="" />
<a href="#!">
<span>Тротуарная плитка из резины</span>
</a>
</li>
<li>
<img src="/images/content/cat04.png" alt="" />
<a href="#!">
<span>Металлоконструкции</span>
</a>
</li>
<li>
<img src="/images/content/cat05.png" alt="" />
<a href="#!">
<span>Облицовочный кирпич</span>
</a>
</li>
<li>
<img src="/images/content/cat06.png" alt="" />
<a href="#!">
<span>Теплоблок</span>
</a>
</li>
</ul>
</div>
Запускать бессмысленно, картинок нет) Но если нужно будет, добавлю.
У каждого блока сейчас на внешнем слое эффект затемнения в виде полупрозрачной png-картинки, которая сменяется при наведении на полупрозрачную желтую.
А теперь собственно вопросы: как такое сверстать на SVG с заполнением каждой фигуры картинкой и текстом (никакой статики, все меняется через админку), будет ли у таких фигур работать псевдоэлемент ::before
(по идее должен), а еще по центру влепить картинку отдельным элементом (сейчас там логотип, абсолютноспозиционированный относительно родителя, не показываю, ибо клиенты)?
P.S. SVG сам не рисую(( Пробовал копировать примеры, но как управлять координатами точек, не понимаю, сетки в голове нет, а уж как впихивать туда текст, подавно.
P.S.S. Можно просто пнуть в верном направлении, например, как рисовать 6-угольники при заданных размерах вьюбокса.
P.S.S.S. Буду рад, если на вопрос заглянет Alexandr_TT ;)