Disegno di linee angolate nei CSS

Question

Quello che sto cercando di fare SEMBRA semplice, ma non riesco a capire come farlo.

Come potete vedere nella mia immagine ci sono un paio di linee rosse che attraversano il fondo, quindi piegate verso l'alto vicino al lato destro.

C'è un modo in CSS per disegnare una linea come questa?

Answer 1

È possibile creare linee angolate in CSS utilizzando le trasformazioni skew (transform: skew(Xdeg)). Di seguito è riportato un frammento di esempio:

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

---

Doppia linea con uno sopra l'area di contenuto e una dietro può anche essere fatto utilizzando un singolo elemento (e un paio di pseudos) come nel frammento qui sotto:

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