Рисование угловых линий в CSS

То, что я пытаюсь сделать LOOKS простым, но я не могу понять, как это сделать.

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

Есть ли способ в CSS рисовать такую строку?

Ответ 1

Вы можете создавать угловые линии в CSS с помощью косых преобразований (transform: skew(Xdeg)). Ниже приведен пример фрагмента:

.shape {
  height: 50px;
  width: 200px;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}

<div class="shape"></div>