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

Question

То, что я пытаюсь сделать, ВЫГЛЯДИТ просто, но я не могу понять, как это сделать.
Как вы можете видеть на моем изображении, есть пара красных линий, которые проходят через нижнюю часть, затем изгибаются вверх к правой стороне.

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

_{Свободный перевод вопроса Drawing angled lines in CSS от участника @Sherwin Flight.}

Answer 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>

Двойная линия, одна из которых находится над областью содержимого, а другая - за ней, также может быть выполнена с использованием одного элемента (и пары псевдо), как в приведенном ниже фрагменте:

.shape:before {
  position: absolute;
  bottom: -5px;
  left: -5px;
  content: '';
  height: 50px;
  width: 100%;
  border-bottom: 3px solid red;
  border-right: 4px solid red;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  transform: skew(-45deg);
}
.shape:after {
  position: absolute;
  content: '';
  bottom: -10px;
  left: 0px;
  height: 55px;
  width: 100%;
  border-bottom: 3px solid red;
  border-right: 4px solid red;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}
.shape {
  position: relative;
  height: 80px;
  width: 400px;
  background: #D0D0D0;
}

<div class="shape">
  Some text that goes within the element...
</div>

_{Свободный перевод ответа от участника @Harry.}

БЛОГ НА HUSL

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

Ответы (1 шт):