我想知道是否可以用纯 CSS 制作一个带有圆 Angular 和缩进边框的正方形。
目前我有这个:
#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>
关于css - 带圆 Angular 和缩进曲线边框的正方形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34358685/