Как сделать фигуру с помощью html div и css

я хочу создать такую html-страницу

я создал это с помощью svg вот мой код

<body>
    <div style = "width: 100%; background-image: url('https://t4.ftcdn.net/jpg/01/25/20/05/360_F_125200542_AyamLpAFVwGqUx2ntcrQpLQE3pde3h23.jpg'); background-repeat: no-repeat; background-size: cover;">
        <svg viewbox = "0 0 20 13.4">
        <defs>
          <clipPath id = "top">
            <polygon points = "0 0, 9.9 0, 9.9 5, 0 8" />
          </clipPath>
          <clipPath id = "right">
            <polygon points = "9.9 0, 9.9 5, 20 8, 20 0" />
          </clipPath>
          
        </defs>
        <image xlink:href = "http://i.imgur.com/RECDV24.jpg" x = "0" y = "0" height = "13.4" width = "20" clip-path = "url(#top)"/>
        <image xlink:href = "http://i.imgur.com/5NK0H1e.jpg" x = "0" y = "0" height = "13.4" width = "20" clip-path = "url(#right)"/>
        
      </svg>
    </div>

      </div>
</body>

как мне преобразовать это только в html и css без тега svg

html css

11.12.2020 11:45

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

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

814

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

Ответы 2

Вы пробовали использовать свойство css clip-path? https://developer.mozilla.org/fr/docs/Web/CSS/clip-path

Я сделал пример, используя clip-path здесь.

CSS

html, body { min-height: 100vh; margin: 0; }
body { position: relative; }

.shape {
  height: 100vh;
  position: absolute;
}

.a { 
  background: red;
  left: 0;
  top: 0;
  width: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
  z-index: 50;
}

.b { 
  background: green; 
  right: 0;
  top: 0;
  width: 50%;
  clip-path: polygon(0 0, 0 30%, 100% 100%, 100% 0);
  z-index: 50;
}

.c { 
  background: blue; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  z-index: 40;
}

.img-container {
  height: 100%;
  width: 100%;
}

.img-container > img {
  display: block; 
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML

<div class = "shape a">
  <div class = "img-container">
    <img src = "https://picsum.photos/200/300" alt = "">
  </div>
</div>
<div class = "shape b">
  <div class = "img-container">
    <img src = "https://picsum.photos/200/300" alt = "">
  </div>
</div>
<div class = "shape c">
  <div class = "img-container">
    <img src = "https://picsum.photos/200/300" alt = "">
  </div>
</div>

11.12.2020 11:48

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

clip-path:polygon() может легко это сделать:

html {
  height:100%;
  background:url(https://picsum.photos/id/104/800/800) center/cover;
}

html::before,
html::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
}
html::before {
  left:0;
  background:url(https://picsum.photos/id/1016/800/800) center/cover;
  clip-path:polygon(0 0,100% 0,100% 50%,0 80%);
}
html::after {
  right:0;
  background:url(https://picsum.photos/id/1019/800/800) center/cover;
  clip-path:polygon(0 0,100% 0,100% 80%,0 50%);
}

Вы можете применить к любому элементу html:

.box {
  height: 200px;
  width: 300px;
  position: relative;
  background: url(https://picsum.photos/id/104/800/800) center/cover;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.box::before {
  left: 0;
  background: url(https://picsum.photos/id/1016/800/800) center/cover;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 80%);
}

.box::after {
  right: 0;
  background: url(https://picsum.photos/id/1019/800/800) center/cover;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 50%);
}

<div class = "box"></div>

С переменными CSS, чтобы можно было легко настроить изображения:

.box {
  height: 200px;
  width: 300px;
  position: relative;
  background: var(--img-1) center/cover;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.box::before {
  left: 0;
  background: var(--img-2) center/cover;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 80%);
}

.box::after {
  right: 0;
  background: var(--img-3) center/cover;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 50%);
}

<div class = "box" style = "
--img-1:url(https://picsum.photos/id/104/800/800);
--img-2:url(https://picsum.photos/id/1016/800/800);
--img-3:url(https://picsum.photos/id/1019/800/800);
 "></div>
 
 <div class = "box" style = "
--img-1:url(https://picsum.photos/id/100/800/800);
--img-2:url(https://picsum.photos/id/17/800/800);
--img-3:url(https://picsum.photos/id/1015/800/800);
 "></div>

11.12.2020 11:59

Другие вопросы по теме

Застрял при попытке воспроизвести определенный CSS-переход (CTA-кнопка, которая перемещается в нижний угол страницы при прокрутке вниз и фиксируется)

Измените :active background-color вкладок React-Bootstrap

Переключить div в зависимости от значения флажка - с анимацией

Приклейте повернутый дочерний div к нижней части родительского

Делаем элемент перетаскиваемым без идентификатора

Показать всплывающую подсказку, когда ввод недействителен

Неизвестно в правиле @tailwind css (unknownAtRules)

Развернуть и свернуть Div в React

Как скрыть содержимое без тега элемента в html?

Мой контейнер Div не отвечает ни на какие изменения CSS, которые я делаю

Как сделать фигуру с помощью html div и css

Ответы 2

Другие вопросы по теме

Похожие вопросы