div之前的CSS形状

Question

我在div之前添加不规则形状有问题.

我需要像这张图片一样生效:

但我需要为整个内容div获得此效果.不仅是左边还是下边.我试图调整用边框制作的css箭头,但它没有给我正确的效果.

它是更好地使用边框与透明色和组合::before,::after伪元素或background-clip属性.

我的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>