能否仅使用单个div通过CSS实现带内凹圆角的特殊造型？

可以仅用单个div实现你需要的带内凹曲线的正方形造型，无需额外元素，也不需要靠背景色遮挡，适配任意底层背景。

方案1：背景径向渐变实现（无需mask，兼容性更好） #

仅通过CSS background属性拼接四个径向渐变即可生成对应形状，示例代码如下：
HTML部分仅需要单个div：

<div class="concave-square"></div>

对应的CSS：

.concave-square {
  width: 200px;
  height: 200px;
  background: 
    /* 顶部内凹 */
    radial-gradient(circle at 50% 0%, transparent 30px, #2196F3 30px) top,
    /* 底部内凹 */
    radial-gradient(circle at 50% 100%, transparent 30px, #2196F3 30px) bottom,
    /* 左侧内凹 */
    radial-gradient(circle at 0% 50%, transparent 30px, #2196F3 30px) left,
    /* 右侧内凹 */
    radial-gradient(circle at 100% 50%, transparent 30px, #2196F3 30px) right;
  /* 设定四个渐变的尺寸 */
  background-size: 100% 50%, 100% 50%, 50% 100%, 50% 100%;
  background-repeat: no-repeat;
}

方案2：mask遮罩实现（支持添加边框） #

如果需要给这个内凹正方形加边框，可以使用mask属性先裁剪出形状，再正常添加border即可：

.concave-square {
  width: 200px;
  height: 200px;
  background: #2196F3;
  border: 2px solid #1565C0;
  /* 兼容webkit内核浏览器 */
  -webkit-mask:
    radial-gradient(circle at 50% 0%, transparent 30px, #fff 30px) top,
    radial-gradient(circle at 50% 100%, transparent 30px, #fff 30px) bottom,
    radial-gradient(circle at 0% 50%, transparent 30px, #fff 30px) left,
    radial-gradient(circle at 100% 50%, transparent 30px, #fff 30px) right;
  mask:
    radial-gradient(circle at 50% 0%, transparent 30px, #fff 30px) top,
    radial-gradient(circle at 50% 100%, transparent 30px, #fff 30px) bottom,
    radial-gradient(circle at 0% 50%, transparent 30px, #fff 30px) left,
    radial-gradient(circle at 100% 50%, transparent 30px, #fff 30px) right;
  mask-size: 100% 50%, 100% 50%, 50% 100%, 50% 100%;
  mask-repeat: no-repeat;
}

参数调整说明 #

• 修改代码中的30px可以调整内凹曲线的半径，数值越大内凹越深
• 修改#2196F3可以调整填充颜色，修改#1565C0可以调整边框颜色
• 修改宽高数值可以调整正方形整体尺寸

内容的提问来源于stack exchange，提问作者b_meet