带圆角和缩进曲线边框的正方形

Question

我想知道是否可以在纯 CSS 中制作带有圆角和缩进边框的正方形。

目前我有这个：

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

Answer 1

另一种创建此边框的纯 CSS 方法是使用 border-image 属性。所需要做的就是创建一个具有所需边框形状的图像，并使用border-image-source 属性将其设置为一个元素。

.shape.large {
  height: 300px;
  width: 300px;
  border-image-source: url(http://i.stack.imgur.com/Qkh6A.png);
  border-image-width: 34px; /* the width of the border portions in the image - refer to image at the end of the answer for the exact portion details*/
  border-image-slice: 34; /* equal to border-image-width */
  border-width: 34px; /* equal to border-image-width */
}
.shape.small {
  height: 100px;
  width: 100px;
  border-image-source: url(http://i.stack.imgur.com/Mra4B.png);
  border-image-width: 14px;
  border-image-slice: 14;
  border-width: 14px;
}
.shape.small.fill {
  background: aliceblue content-box;
  border-image-source: url(http://i.stack.imgur.com/Ovj03.png);
  border-width: 14px;
}

/* Just for demo */

body {
  background: url(http://lorempixel.com/800/800/abstract/2);
}
.shape.small {
  float: left;
}
.shape.large {
  clear: both;
}

<div class='shape small'>Some content</div>
<div class='shape small fill'>Some content</div>
<div class='shape large'>Some content</div>

目前，这种方法绝对与 SVG 相比没有太大优势，但它是一种选择，在我看来，它比其他可能的纯 CSS 方法更好。

这种方法的优点是：

• 极简和低复杂度的代码。
• 更好地控制曲线及其半径（如使用 SVG），因为可以单独创建具有所需边框曲率的图像。
• 可以放置在图像或渐变背景之上。
• 可以在不支持它的浏览器中优雅地降级（变为实心方形边框）。

缺点是：

• 容器仍然是正方形，因此 hover 效果不会像 SVG 那样局限于形状的边界。
• 可以向形状添加纯色填充（通过使用图像的填充版本），但添加渐变或图像填充很棘手，因为边框仍然是块（即曲线两侧都有透明区域)。
• 输出具有响应性，但随着尺寸增加或减少超过阈值，形状开始看起来有点压缩或拉伸。因此，这更适合基于断点的设计。
• browser support 不错，但也不是很好。它适用于 Chrome、Firefox、Safari、Opera 和 IE11+。

边框图片宽度的计算：

边框区域的宽度或高度（变成border-image-width）只不过是下图中突出显示的部分的宽度。

Answer 2

SVG 可能是这里的方法，但这里是纯 CSS 中的一个非常接近的近似值。通过增加外圈的大小可以做得更好。

#middle {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  background-color: green;
  border: 2px solid #8A6EF1;
}
.outside {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.cutout {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid #8A6EF1;
}
#top {
  top: -100px;
  height: 10px;
}
#right {
  top: -110px;
  left: 90px;
  width: 10px;
}
#bottom {
  top: -120px;
  height: 10px;
}
#left {
  top: -220px;
  width: 10px;
}
#top > .cutout {
  margin-top: -90px;
}
#left > .cutout {
  margin-left: -90px;
}

<div id="wrapper">
  <div id="middle">
  </div>
  <div id="top" class="outside">
    <div class="cutout">
    </div>
  </div>
  <div id="right" class="outside">
    <div class="cutout">
    </div>
  </div>
  <div id="bottom" class="outside">
    <div class="cutout">
    </div>
  </div>
  <div id="left" class="outside">
    <div class="cutout">
    </div>
  </div>
</div>

Answer 3

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

Answer 4

这个草稿模型尽可能接近纯 CSS，但仍然需要嵌套 div。您需要调整前/后圆的大小/半径。

Pen

div {

  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px; 
  border: 4px solid purple;
  border-radius: 30px;
  //overflow: hidden;
  box-sizing: border-box;

  &:before {
    position: absolute;
    top: -4px;
    left: -94px;
    content: ' ';
    width: 100px;
    height: 100px;
    border: 4px solid purple;
    border-radius: 50px;
    box-sizing: border-box;
    background-color: white;
    clip: rect(0px, 100px, 100px, 90px);
  }

  &:after {
    position: absolute;
    top: -4px;
    right: -94px;
    content: ' ';
    width: 100px;
    height: 100px;
    border: 4px solid purple;
    border-radius: 50px;
    box-sizing: border-box;
    background-color: white;
    clip: rect(0px, 10px, 100px, 0px);
  }
}

div > div {
  position: absolute;
  top: -4px;
  left: -4px;
  transform: rotate(90deg);
  border-color: transparent;
}