Html 如何使用CSS创建此形状

红色边框下的形状：

我非常努力地使用CSS3实现这个形状，但每次都失败了。我还尝试添加

底部边框

和

左侧边框

。请参阅CSS代码以了解我在做什么：

#梯形{
背景：蓝色；
高度：100px；
宽度：100px；
保证金：自动；
}
#梯形：之前{
内容：“；
位置：绝对位置；
边框顶部：50px纯红；
左边框：50px实心透明；
保证金：50px 0px 0px-50px；
变换：旋转（0度）；
}
#梯形：之后{
内容：“；
位置：绝对位置；
边框顶部：50px纯红；
右边框：50px实心透明；
保证金：50px 0px 0px 100px；
变换：旋转（0度）；
}

---

如果您有纯色背景，请尝试此选项

正文{
背景：灰色；
保证金：0；
}
.集装箱{
宽度：100%；
高度：200px；
背景：url（“http://lorempixel.com/1000/300/nature/3");
背景尺寸：封面；
}
.内容{
高度：100px；
颜色：#fff；
}
.形状{
位置：相对位置；
高度：100px；
溢出：隐藏；
}
.形状：之后{
内容：“；
位置：绝对位置；
宽度：40%；
身高：100%；
背景：灰色；
排名：0；
变换：倾斜（30度）；
左-10%；
}
.形状：以前{
内容：“；
位置：绝对位置；
宽度：40%；
身高：100%；
背景：灰色；
排名：0；
变换：倾斜（-30度）；
右图：-10%；
}

目录

如果您有纯色背景，请尝试此选项

正文{
背景：灰色；
保证金：0；
}
.集装箱{
宽度：100%；
高度：200px；
背景：url（“http://lorempixel.com/1000/300/nature/3");
背景尺寸：封面；
}
.内容{
高度：100px；
颜色：#fff；
}
.形状{
位置：相对位置；
高度：100px；
溢出：隐藏；
}
.形状：之后{
内容：“；
位置：绝对位置；
宽度：40%；
身高：100%；
背景：灰色；
排名：0；
变换：倾斜（30度）；
左-10%；
}
.形状：以前{
内容：“；
位置：绝对位置；
宽度：40%；
身高：100%；
背景：灰色；
排名：0；
变换：倾斜（-30度）；
右图：-10%；
}

目录

使用

:before

和

:before

在底部放置两个三角形

#梯形{
宽度：200px；
高度：100px；
背景色：红色；
位置：相对位置；
}
#梯形：之前{
内容：“；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 30px 30px 30px；
边框颜色：透明白色透明；
显示：块；
变换：旋转（-135度）；
位置：绝对位置；
底部：-5px；
左：-20px；
}
#梯形：之后{
内容：“；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 30px 30px 30px；
边框颜色：透明白色透明；
显示：块；
变换：旋转（135度）；
位置：绝对位置；
底部：-5px；
右：-20px；
}

---

使用

:before

和

:before

在底部放置两个三角形

#梯形{
宽度：200px；
高度：100px；
背景色：红色；
位置：相对位置；
}
#梯形：之前{
内容：“；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 30px 30px 30px；
边框颜色：透明白色透明；
显示：块；
变换：旋转（-135度）；
位置：绝对位置；
底部：-5px；
左：-20px；
}
#梯形：之后{
内容：“；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 30px 30px 30px；
边框颜色：透明白色透明；
显示：块；
变换：旋转（135度）；
位置：绝对位置；
底部：-5px；
右：-20px；
}

---

我想这会奏效的。希望它对你有用

.main框{
背景：ddd；
宽度：300px；
高度：100px；
显示：内联块；
位置：相对位置；
文本对齐：居中；
}
.主框：之后{
内容：''；
宽度：0；
身高：0；
边框底部：70px实心#999；
右边框：70px实心透明；
位置：绝对位置；
左：0；
底部：0；
}
.主框：之前{
内容：''；
宽度：0；
身高：0；
边框底部：70px实心#999；
左边框：70px实心透明；
位置：绝对位置；
右：0；
底部：0；
}

---

#试用

我想这会奏效的。希望它对你有用

.main框{
背景：ddd；
宽度：300px；
高度：100px；
显示：内联块；
位置：相对位置；
文本对齐：居中；
}
.主框：之后{
内容：''；
宽度：0；
身高：0；
边框底部：70px实心#999；
右边框：70px实心透明；
位置：绝对位置；
左：0；
底部：0；
}
.主框：之前{
内容：''；
宽度：0；
身高：0；
边框底部：70px实心#999；
左边框：70px实心透明；
位置：绝对位置；
右：0；
底部：0；
}

---

如果可能，最好使用png图像作为背景。如果这不是一个选项，在两端创建两个div，内联显示并旋转它们以创建坡度，注意它们的大小。另一种可能是在回答中给出的前后使用，但如果导航条顶部有粘性，那就不太好了。边框将隐藏其下的内容。

如果可能，最好使用png图像作为背景。如果这不是一个选项，在两端创建两个div，内联显示并旋转它们以创建坡度，注意它们的大小。另一种可能是在回答中给出的前后使用，但如果导航条顶部有粘性，那就不太好了。边框将隐藏其下的内容。

根据需要，您可以使用剪辑路径：

#梯形{
背景：url(https://upload.wikimedia.org/wikipedia/commons/8/83/Jho_Arce_User_Profile_Image.jpg)不重复；
背景尺寸：封面；
高度：100px；
宽度：200px；
保证金：自动；
-webkit剪辑路径：多边形（100%0、100%70%、70%100%、30%100%、0%70%、0）；
剪辑路径：多边形（100%0、100%70%、70%100%、30%100%、0%70%、0）
}
身体{
背景：银；
}