css – 带圆角和缩进弯曲边框的广场

我想知道是否可以在纯CSS中创建一个圆角的方形和缩进的边框。

目前我有这个：

#custom-square {
     position: relative;
     display: block;
     width: 75px;
     height: 75px;
     border: 2px solid #8A6EF1;
     border-radius: 10px;
     background-color: white;
}

解决方法

考虑到需要调整 double curves with CSS的麻烦和代码量，SVG似乎更合适。 svg的其他几个原因是：

>控制路径(颜色，宽度，曲线…)
>用简单的颜色，渐变或图像来控制填充
>少代码
>您可以在非平原背景(渐变或图像)上显示它
>维护用户交互形状的界限(悬停，点击…)

这是使用inline svg与path element的基本示例。
曲线绘制为Cubic Bezier curves：

svg{width:30%;}

<svg viewBox="0 0 10 10">
  <path d="M1.5 0.5 Q5 1 8.5 0.5 Q9.5 0.5 9.5 1.5 Q9 5 9.5 8.5 Q9.5 9.5 8.5 9.5 Q5 9 1.5 9.5 Q0.5 9.5 0.5 8.5 Q1 5 0.5 1.5 Q0.5 0.5 1.5 0.5z" 
        fill="none" stroke-width="0.2" stroke="#8A6FF2" />
</svg>

原文地址：https://www.jb51.cc/css/218218.html