使用CSS3在框中绘制弯曲的边框

Question

如何使用CSS3在框中绘制边框 - 如此图像？

Answer 1

一个可能的解决方案就是这个，

#curve{
    margin:0 auto;
    position:relative;
    width:50px;
    height:50px;
    border-top:1px solid red;
    border-right:1px solid red;
    border-top-right-radius:50px;
    float:left;
    margin-left:50px;
}
    
#curve:after{
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border-bottom: 1px solid red;
    border-left: 1px solid red;
    border-bottom-left-radius: 50px;
    left: 50px;
    top: 50px;
}

<div id="curve"></div>

Answer 2

SVG是创建此类形状的更好选择。它简单易行。

我们可以使用SVG的path元素来创建这个形状，并用一些颜色，渐变或图案填充它。

只有一个属性d用于定义路径元素中的形状。该属性本身包含许多短命令和很少的参数，这些命令是这些命令工作所必需的。

以下是创建此形状所需的代码：

<path d="M10,10
         L210,10
         Q230,10 250,50
         T290,90
         L10,90
         Z" />

我在path元素中使用了5个命令。以下是简要说明：

• M命令用于定义起点。它出现在开头，并指定绘图应该从哪里开始。

• L命令用于绘制直线。

• Q命令用于绘制曲线。

• T生成与之前相同类型的曲线，但如果它遵循另一个Q命令或T命令。
• Z命令用于关闭当前路径。

<强>输出：

工作示例：

body {
  background: linear-gradient(#466273, #5c8ea8) no-repeat;
  min-height: 100vh;
  margin: 0;
}

<svg width="300" height="100" viewBox="0 0 300 100">
  <path d="M10,10 L210, 10 Q230,10 250,50 T290,90 L10,90 Z" stroke="#000" stroke-width="2" fill="yellowgreen" />
</svg>

有用的资源：

• SVG：Specs，MDN