CSS를 사용하여 곡선 경계를 만드는 방법

Question

image와 같은 곡선 테두리를 CSS를 사용하여 만드는 방법은 무엇입니까? 감사.

Answer 1

svgpolyline 요소를 사용할 수 있습니다. 우리는 당신이 이미지를 제공 한 것처럼 만들 수 없습니다

.contain-demo { 
 
    margin: 25px auto; 
 
    text-align: center; 
 
} 
 

 
.p { 
 
    text-align: center; 
 
    margin-top: 140px; 
 
}

<div class="contain-demo"> 
 
    <svg width="150" height="200"> 
 
    <desc>First orange polyline demonstrating white fill on open path.</desc> 
 
    <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" stroke="#D07735" stroke-width="6" /> 
 
    </svg> 
 
    <svg width="150" height="200"> 
 
     <desc>Second orange polyline demonstrating yellow fill on open path.</desc> 
 
     <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="#F9F38C" stroke="#D07735" stroke-width="6" /> 
 
    </svg> 
 
</div>