Css mask 形状和边框

Question

我想知道我是否可以纯粹用CSS来做这个形状？

我确实尝试过使用图像蒙版，但问题是边框，所以我继续尝试使用背景图像解决方案，但问题是不同设备的背景大小，因为框内会包含文本。

不知道有没有人做过类似的形状或者有什么推荐的技巧我需要知道，不胜感激。

先谢谢你。

Answer 1

这是一个工作演示，展示了您可以仅使用 CSS 而无需图像来完成此形状的方法。我添加了一个伪元素并对其进行了绝对定位。

请记住，如果您的 body 背景是不同的颜色，您需要在 ::before 中更改颜色以保持幻觉。

如果您有任何问题，请告诉我。

#box {
  height: 100px;
  background: #f7f7f7;
  border: 2px solid #e4e4e4;
  border-radius: 10px;
  position: relative;
}

#box::before {
  background: white;
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 35px;
  height: 30px;
  border-radius: 0 0 20px 0;
  border-right: 2px solid #e4e4e4;
  border-bottom: 2px solid #e4e4e4;
}

<div id="box"></div>