Html 加入2个div'；这是一个有透视图的盒子

希望创建如下功能区：

目前，我的尝试如下所示：

以下是我为产品编写的代码：

.ribbon{
宽度：200px；
显示：内联块；
边距：0px；//删除所有边距，以防止在每个元素处中断
框大小：边框框；//允许填充不影响元素宽度
}
.前线{
浮动：左；
显示：内联；
宽度：45%；
背景：#EA0B1D；
边界半径：6px 0px 0px 6px；
填充顶部：15px；
垫底：15px；
}
.中{
浮动：左；
显示：内联；
宽度：5%；
背景：#B1071D；
填充顶部：15px；
垫底：15px；
变换：旋转（0度）斜交（45度）；
-webkit变换：旋转（0度）斜交（45度）；
-ms变换：旋转（0度）斜交（45度）；
}
.回来{
浮动：对；
显示：内联；
宽度：45%；
背景：#EA0B1D；
边界半径：0px 6px 6px 0px；
填充顶部：15px；
垫底：15px；
边缘顶部：15px；
}
跨度{
颜色：白色；
填充：15px；
文本对齐：居中；
}

正文
正文

基于您的解决方案

我注意到的第一件事是，不是沿着x轴倾斜，而是应该沿着y轴倾斜45度

transform: rotate(0deg) skewY(45deg);

这将为中间部分提供所需的形状

然后，只需使用

.middle

和

.back

类中的边距对齐形状即可

.ribbon{
宽度：200px；
显示：内联块；
边际：0px；
框大小：边框框；
}
.前线{
浮动：左；
显示：内联；
宽度：45%；
背景：#EA0B1D；
边界半径：6px 0px 0px 6px；
填充顶部：15px；
垫底：15px；
}
.中{
浮动：左；
显示：内联；
宽度：5%；
页边距顶部：5px；/*添加了此行*/
背景：#B1071D；
填充顶部：15px；
垫底：15px；
变换：旋转（0度）斜交（45度）；/*将斜交更改为斜交*/
-webkit变换：旋转（0度）斜交（45度）；/*将斜交更改为斜交*/
-ms变换：旋转（0度）斜交（45度）；/*将斜交更改为斜交*/
}
.回来{
浮动：对；
显示：内联；
页边距顶部：10px；/*将15px更改为10px*/
右边距：10px；/*添加了此行*/
宽度：45%；
背景：#EA0B1D；
边界半径：0px 6px 6px 0px；
填充顶部：15px；
垫底：15px；
}
跨度{
颜色：白色；
填充：15px；
文本对齐：居中；
}

正文
正文

您发布的图像与您拥有的代码之间存在一些差异：这两个元素的高度是否不同？因为这将改变解决方案的方式。如果它们的高度相同，则使用“扭曲”变换功能区连接件将有效。否则，您可能必须使用JS来为此绘制SVG路径。使用透视图很困难，因为您需要同时考虑功能区的大小、边的坐标，并为此计算正确的变换矩阵。@Terry不必完全具有相同的高度，只要具有相似的高度即可。我主要寻找的是两个div之间的连接。如果是这样的话，使用透视可能不是正确的方法：它需要太多的变量。基本上，您需要一个数学模型来计算（1）透视值，（2）功能区的尺寸，（3）旋转角度，（4）变换原点。您愿意为此接受基于JS的解决方案吗？请参阅我第一条评论的后半部分。@Terry JS完全可以使用您的答案！如果您在代码之前或代码内部解释您所做的更改，您可能会得到更多的支持。很容易看到您添加了

边距顶部

，但我花了一段时间才看到您将

skewX

更改为

skewY

。如果可能，请指出您所做的所有更改。谢谢，我将改进我的回答谢谢您的解释！已选择作为解决方案：）