html - div 之前的 CSS 形状

Question

我在 div 之前添加不规则形状时遇到问题。

我需要得到这个图像中的效果:

但我需要为整个内容 div 获得这种效果。不仅是左边或底部。我试图适应用边框制作的 css 箭头，但它没有给我正确的效果。

使用透明色和 ::before、::after 伪元素或 background-clip 组合使用边框会更好吗？ > 属性(property)。

我的 HTML 结构

.wrapper::before {
  display: block;
  height: 0px;
  width: 0px;
  border-left: 5px solid transparent;
  border-right: 650px solid transparent;
  border-bottom: 50px solid black;
}
.content {
  background-color: #f2f2f2;
  box-sizing: border-box;
  color: #000;
  text-transform: uppercase;
}

<div class="wrapper">
  <div class="content">
    Content
  </div>
</div>

有没有办法结合 ::after 和 ::before 伪元素来将这种效果添加到整个 div？

Answer 1

由于形状不规则，这会很棘手，也许 border-image 会是一个更简单的解决方案。如果蓝色背景可能基于矩形形状，您可以使用倾斜和旋转变换使用单个伪元素轻松完成，例如

.wrapper {
  padding: 50px;
  position: relative;
}
.content {
    background-color: #f2f2f2;
    box-sizing: border-box;
    color: #000;
    text-transform: uppercase;
    width: 300px;
    height: 200px;
    position: relative;
    z-index: 3;
    text-align: center;
    line-height: 200px;
}
.wrapper::before {
  content: '';
  display: block;
  background: rgb(145,205,239);
  width: 330px;
  height: 230px;
  position: absolute;
  z-index: 1;
  margin: -15px;
  transform: rotate(-1deg) skew(-5deg, -3deg);
}

<div class="wrapper">
    <div class="content">
CONTENT
    </div>
</div>