如何使用CSS创建曲线边框 [英] How to make curve border using css

问题描述

如何使用css制作曲线边框，如同

How to make curve border like the image using css? Thanks.

推荐答案

您可以使用 svg polyline 元素。

You can use the svg polyline element.

下面是一个例子：

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

这篇关于如何使用CSS创建曲线边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！