CSS'de açılı çizgiler çizme

Question

LOOKS'u basit yapmaya çalışıyorum ama nasıl yapılacağını anlayamıyorum.

Görüntümde gördüğünüz gibi alttan geçen birkaç kırmızı çizgi var, sonra sağ tarafa doğru yukarı doğru bükün.

Böyle bir çizgi çizmek için CSS'de bir yol var mı?

Answer 1

Sen çarpık dönüşümler (transform: skew(Xdeg)) kullanarak CSS'deki açılı çizgiler oluşturabilirsiniz. Aşağıda bir örnek parçacık: İçerik alanının üzerinde ve diğeri ile

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

---

Çift hat aynı zamanda tek bir eleman (ve pseudos bir çift) gibi kullanılarak yapılabilir arkasında

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

: aşağıdaki kod parçasında