Создание областей произвольной формы в HTML

Для проекта мне нужно сделать страницу с тремя областями, каждая из которых имеет разную форму.

Как это :

Контактная точка всегда должна находиться посередине страницы, и каждая область имеет изображение в качестве фона. Щелчок в любом месте определенной области перенаправляет вас на другую страницу.

Я уже пробовал использовать SVG, но я не могу заставить изображение сохранить такое же соотношение сторон, но SVG изменит размер в соответствии со страницей.

html, body {
    margin: 0;
    height: 100%;
}

svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
}

<svg viewBox = "0 0 1920 1080" version = "1.1" xmlns = "http://www.w3.org/2000/svg" preserveAspectRatio = "none">

    <pattern id = "image" patternUnits = "userSpaceOnUse" width = "1920" height = "1080" x = "0" y = "0">
        <image xlink:href = "https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" x = "0" y = "0" width = "100%" height = "100%" preserveAspectRatio = "xMinYMax slice"/>
    </pattern>

    <g id = "Page-1" stroke = "none" stroke-width = "1" fill = "none" fill-rule = "evenodd">
        <g id = "Artboard">
            <polygon id = "top" points = "960 540 0 2.27373675e-13 1920 0" fill = "red"></polygon>
            <polygon id = "left" points = "960 1080 0 1080 0 0 960 540"></polygon>
            <polygon id = "bottom" points = "960 1080 960 540 1920 0 1920 1080" fill = "blue"></polygon>

            <use href = "#left" fill = "url(#image)"></use>

        </g>
    </g>
</svg>

так какой смысл в цветах, если впереди картинки? вы планируете добавить непрозрачность: 0,5?

— 10.07.2018 11:55

ну, это действительно хорошо выглядит, не так ли? в чем именно проблема?

— 10.07.2018 11:56

как я это вижу, это похоже на середину

— 10.07.2018 12:01

@wayneOS Проблема в том, что соотношение сторон картинки меняется при изменении размера окна

— 10.07.2018 12:02

javascript html css svg canvas

10.07.2018 11:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я бы рассмотрел clip-path и фон для изображений

body {
  margin: 0;
  height: 100vh;
  display: flex;
}

.left,
.right {
  width: 50%;
}

.top {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: url(https://picsum.photos/800/500?image=1069) center/cover;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.left {
  background: url(https://picsum.photos/800/500?image=1060) center/cover;
}

.right {
  background: url(https://picsum.photos/800/500?image=1050) center/cover;
}

<div class = "top">
</div>
<div class = "left">
</div>
<div class = "right">
</div>

Спасибо, это именно то, что я искал. Тем не менее, знаете ли вы какой-либо другой способ с лучшей поддержкой браузера?

— 10.07.2018 16:33

@jrmybeaud с фоновым изображением это немного сложно, но если фон статичный, да, я знаю

— 10.07.2018 16:34

10.07.2018 12:04

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.main-wrap {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.main-wrap section a {
  width: 100%;
  height: 100%;
  display: block;
}

.main-wrap section[role = "s1"] {
  background: #333;
  width: 100%;
  height: calc(50vh);
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.main-wrap section a img {
  width: 100%;
  height: auto;
}

.main-wrap section[role = "s2"] {
  width: calc(50vw);
  height: calc(100vh);
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(0 0%, 100% 50%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0%, 100% 50%, 100% 100%, 0% 100%);
}

.main-wrap section[role = "s3"] {
  width: calc(50vw);
  height: calc(100vh);
  background: #eee;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-clip-path: polygon(100% 0, 0% 50%, 0 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 50%, 0 100%, 100% 100%);
}

<div class = "main-wrap">
  <section role = "s1">
    <a href = "https://picsum.photos/1200/600">
      <img src = "https://picsum.photos/1200/600" alt = "">
    </a>
  </section>
  <section role = "s2">
    <a href = "https://picsum.photos/600/1200/?gravity=east">
      <img src = "https://picsum.photos/600/1200/?gravity=east" alt = "">
    </a>
  </section>
  <section role = "s3">
    <a href = "https://picsum.photos/600/1200/?random">
      <img src = "https://picsum.photos/600/1200/?random" alt = "">
    </a>
  </section>
</div>

Хотя это может дать ответ на вопрос, лучше добавить описание того, как этот ответ может помочь решить проблему. Пожалуйста, прочтите Как мне написать хороший ответ, чтобы узнать больше.

— 10.07.2018 12:47

10.07.2018 12:39