Как разделить фон страницы вертикальной полилинией?

Я нашел, как разделить страницу вертикальной линией - см. jsfiddle: Как разделить фон страницы вертикальной полилинией?

Код ниже -

body {
    background-color: white;
}

#background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: black;
    z-index: 1;
}

#content {
    position: relative;
    z-index: 2;
    padding: 30px;
    text-align: center;
    font-weight: bold;
    color: red; 
    font-family: Arial, sans-serif;
}

Теперь я хотел бы заменить вертикальную линию на ломаную, чтобы получилось что-то вроде этого: Как разделить фон страницы вертикальной полилинией?

Как я могу это сделать с помощью CSS?

P.S. Я не могу использовать фоновое изображение, так как ломаные линии могут быть разными (точки будут иметь разные координаты).

html css background polyline

13.11.2018 21:03

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

244

Ответы 1

Вы можете рассмотреть несколько вариантов фона для достижения этой цели, но может быть сложно найти разные значения в зависимости от формы. Это в основном комбинация формы треугольника и формы прямоугольника друг над другом, чтобы создать последний слой (изменение цвета поможет вам идентифицировать каждого из них).

body {
  margin:0;
}
.box {
  height:100vh;
  background:
    linear-gradient(to bottom right,#000 49.8%,transparent 50%) 0 0/70% 120%,
    linear-gradient(to top right,#000 49.8%,transparent 50%) 0 0/60% 70%,
    linear-gradient(#000,#000) 0 100%/50% 31%,
    linear-gradient(to bottom right,#000 49.8%,transparent 50%) 55.3% 100%/10% 30.2%;
  background-repeat:no-repeat;
}

<div class = "box">

</div>

Вы также можете рассмотреть clip-path в псевдоэлементе, и это будет проще (https://bennettfeely.com/clippy/)

body {
  margin:0;
}
.box {
  height:100vh;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:20%;
  background:#000;
  -webkit-clip-path: polygon(0 0, 72% 0, 59% 33%, 68% 62%, 47% 100%, 0 100%);
clip-path: polygon(0 0, 72% 0, 59% 33%, 68% 62%, 47% 100%, 0 100%);
}

<div class = "box">

</div>

13.11.2018 21:18

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

Как сделать CSS 2 строки и 8 столбцов

Сделать панель навигации bs4 в поле содержимого

Создание кнопок в Java с использованием настраиваемого шрифта приводит к тому, что кнопки имеют странную форму

Селектор таблицы столбцов jquery

Сохраните динамический HTML-класс как переменную JS

Почему у меня появляются несогласованные пробелы над текстом кнопок и под ними в зависимости от типа устройства (настольного или мобильного) с семейством шрифтов Orbitron?

Вывод на печать в зависимости от размера окна

Как горизонтально центрировать сгруппированные элементы внутри панели навигации

Таблица HTML: ширина последнего столбца автоматически

HTML-таблицы - синтаксис атрибутов ячеек Rowspan

Как разделить фон страницы вертикальной полилинией?

Ответы 1

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

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