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

Question

То, что я пытаюсь сделать СМОТРЕТЬ просто, но я не могу понять, как это сделать.

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

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

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>

---

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

.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: whitesmoke; 
 
}

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