Css 遮罩塑形和边框

Question

我想知道我是否可以完全用CSS做这个形状？

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

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

先谢谢你。

Answer 1

这是一个工作演示，展示了您可以仅使用 CSS 且没有图像来完成此形状的方法。我添加了一个 pseudo-element 并绝对定位它。

请记住，如果您的 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>

Css 遮罩塑形和边框

Css mask shaping & border

css

css-shapes