html 形状div,html – div之前的CSS形状

我在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;

}

Content

有没有办法在伪元素之后组合:: after和::将这个效果添加到整个div？