如何使用HTML、CSS使背景div内部弯曲？

我想我的部分背景看起来像在最后的图像所示，我如何使用css做到这一点

.bg{
宽度：400px；
高度：200px；
填充：20px；
文本对齐：居中；
边框：1px实心#000；
背景：红色；
颜色：#fff；
显示器：flex；
}
.bg p{
文本对齐：居中；
保证金：自动；
字体大小：36px；
}

章节内容

<代码> > p>可以考虑使用下面的代码>线性渐变< /代码>多个背景，而不需要额外的元素：


.bg{
宽度：400px；
高度：220px；
填充：50px0；
框大小：边框框；
文本对齐：居中；
背景：
线性渐变（至左下角，红色50%，透明51%）左下角，
线性渐变（至左下角，透明49%，红色50%），左上角，
线性渐变（至右下角，红色50%，透明51%）右下角，
线性渐变（至右下角，透明49%，红色50%），右上角，
红色内容框；
背景尺寸：50%50px；
背景重复：无重复；
颜色：#fff；
显示器：flex；
}
.bg p{
文本对齐：居中；
保证金：自动；
字体大小：36px；
}

章节内容

您可以使用来做这些事情，并使用创建它们


.bg{
宽度：400px；
高度：200px；
填充：20px；
文本对齐：居中；
边框：1px实心#000；
背景：红色；
颜色：#fff；
显示器：flex；
-webkit剪辑路径：多边形（100%0、100%80%、50%100%、0.80%、0.0、50%20%）；
剪辑路径：多边形（100%0，100%80%，50%100%，0.80%，0.0，50%20%）；
}
.bg p{
文本对齐：居中；
保证金：自动；
字体大小：36px；
}

章节内容

您可以按照以下步骤获得所需的形状


。左{
-webkit框大小：内容框；
-moz框大小：内容框；
框大小：内容框；
宽度：150px；
高度：200px；
边界：无；
颜色：rgba（0,0,0,1）；
-o-text-overflow：剪辑；
文本溢出：剪辑；
背景：#1abc9c；
-webkit变换：歪斜（15度）；
变换：歪斜（15度）；
浮动：左；
边缘顶部：20px；
}
.对{
-webkit框大小：内容框；
-moz框大小：内容框；
框大小：内容框；
宽度：150px；
高度：200px；
边界：无；
颜色：rgba（0,0,0,1）；
-o-text-overflow：剪辑；
文本溢出：剪辑；
背景：#1abc9c；
-webkit变换：歪斜（-15度）；
变换：歪斜（-15度）；
浮动：左；
边缘顶部：20px；
}
你好
World

您应该查看CSS

：before

和

：after

伪元素。你可以使用，但因为你有一个边界，你需要在你的p和bg的前后