Css面具塑形＆amp;边界

Question

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

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

我想知道是否有任何相似的形状，或者我需要知道任何推荐的技术，我将不胜感激。

先谢谢你。

Answer 1

这是一个工作演示，你可以通过CSS和没有图像来完成这种形状。我添加了一个伪元素，绝对定位它。

请注意，如果您的身体背景颜色不同，您需要更改::before中的颜色以保持幻觉。

如果您有任何问题，请与我们联系。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;