css - 带圆 Angular 和缩进曲线边框的正方形

Question

我想知道是否可以用纯 CSS 制作一个带有圆 Angular 和缩进边框的正方形。

目前我有这个:

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

Answer 1

考虑到对齐 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>