Проблема по вёрске. Буду очень благодарен любым вариантам решения
Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті
Всем привет! Вопрос по #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%; }
15 коментарів
Додати коментар Підписатись на коментаріВідписатись від коментарів