Search the Community
Showing results for tags 'треугольник'.
Found 3 results
-
Я не знаю как "Это" создать многое перепробовал - не получилось.
Vetal6666 posted a question in HTML Coding
Как в верстке создать этот объект?🤔 (Углы по 60 градусов - то есть треугольник равносторонний) -
Всем привет! Вопрос по #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%; }
-
Как-то встречал статью, как лучше сделать такое меню, но негде не могу ее найти. Может подскажите? Заранее спасибо.
