如何使用css制作曲线边框

Question

如何使用css制作像image这样的曲线边框？谢谢。

Answer 1

您可以使用svg polyline元素。

以下是一个例子：

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