Всем привет! Вопрос по #svg ! Нужно поделить екран на 4 треугольника(как на картинке, ссылка на гугл диск с картинками и сами картинки снизу). В этих треугольниках должна быть картинка и пару строк контента, ну и наведение работать должно. Пробовал крутить блоки, но посмотрев, что адаптивность умирает — решил пойти через свг, но так как не шарю в viewBox и point`ах застрял((. Если у вас есть другие варианты решения, с радостью жду! Заранее спасибо!
ССЫЛКА НА ПАПКУ С КАРТИНКОЙ: drive.google.com/...OB17Nn6PExYTluN0lVcm1xOW8
а также ФАЙЛЫ САЙТА: drive.google.com/...OB17Nn6PExTUdFODNXYzRNOTA ——————————————HTML—————————————————
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="svg_1">
<svg version="1.1" width="100%" height="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" >
<polygon fill="#9E2929" points="0,100 50,0 100,100"/>
</svg>
<p class="ffggtt">ывмвыывп<p>
<svg class="svgshka_2" version="1.1" width="50%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" >
<polygon fill="#492121" points="0,100 50,0 100,100"/>
</svg>
<svg class="svgshka" version="1.1" width="50%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" >
<polygon fill="#492121" points="0,100 50,0 100,100"/>
</svg>
<svg version="1.1" width="100%" height="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" >
<polygon fill="#9E2929" points="0,100 50,0 100,100"/>
</svg>
</div>
</body>
</html>
—————————————-CSS———————————————
* {
height: 100%;
margin: 0;
padding: 0;
}
.svg_1 {
width: 100%;
height: 100%;
box-sizing: content-box;
}
.svg_1 svg:first-child {
width: 100%;
height: 50%;
display: block;
transform: rotate(180deg);
}
.svg_1 polygon:hover {
fill: #C53737;
}
.svg_1 svg {
width: 100%;
height: 50%;
display: block;
}
.ffggtt {
position: absolute;
z-index: 9999;
left: 50%;
}
