Создание диагональной линии/раздела/границы с помощью CSS

Я пытаюсь создать диагональную линию на веб-странице, чтобы действовать как разрыв раздела/раздела. Это по сути разделение цвета. Я не могу использовать изображение, как если бы страница была увеличена, изображение будет pixelate. Поэтому мне нужно иметь возможность рисовать диагональную линию непосредственно в нижней части div, как показано на рисунке ниже.

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

Есть ли способ рисовать диагональные линии в CSS? Как вы можете видеть, мне нужно создать div размером 90px и иметь разделительную/диагональную линию в этом div. Затем я могу взглянуть на добавление изображения, но главная проблема - не знать, возможно ли это с помощью CSS.

Ответы

Ответ 1

С svg это довольно просто:

svg {
  display: block;
  width: 100%;
  height: 90px;
  background: yellow;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
  <polygon points="100 0 100 10 0 10" />
</svg>

Ответ 2

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

Изначально разделил это на 2 отдельных div/треугольника и присоединил их, но благодаря web-tiki и kaiido усовершенствовал его, чтобы использовать только 1 div и минимальный CSS

*{
  border: 0;
  padding: 0;
  margin: 0;
}

#gradient {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 100vw 0 0;
  border-color: yellow black transparent transparent;
  transform: scale(1.0001);
}

<div id="gradient"></div>

Ответ 3

Используйте линейный градиент

div {
  height: 90px;
  background-image: linear-gradient(to bottom right, yellow, yellow 50%, black 50%, black);
}

<div></div>

Ответ 4

Вы можете использовать CSS3 clip:

.yellow {
  width: 100%;
  height: 90px;
  background: yellow;
  -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}
.black {
  width: 100%;
  height: 90px;
  background: black;
  -webkit-clip-path: polygon(100% 0, 0 100%, 100% 99%);
  clip-path: polygon(100% 0, 0 100%, 100% 99%);
  margin-top: -90px;
}

<div class="yellow"></div>
<div class="black"></div>

Ответ 5

Вы можете сделать это, используя градиент.

body {
  height: 200px;
  margin: 0 0 20px 0;
  background-color: transparent;
  background-size: 20px 20px;
  background-image:
     -webkit-repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
  background-image:
     -moz-repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
  background-image:
     -o-repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
  background-image:
     repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
}

JSFiddle