Html 如何制作重叠三角形

在过去的几天里，我一直在追溯旧的CSS作战目标，我在14号上遇到了麻烦。该代码要求您制作两个部分重叠的三角形，以便下部三角形的一侧从前面后面伸出。这里有一个链接到

这是我的密码：

*{
背景#f2b6；
}
div{
位置：绝对位置；
}
#a{
宽度：0；
身高：0；
左边框：75px实心透明；
右边框：75px实心透明；
边框底部：130px实心#FF6D00；
左：190px；
顶部：85px；
}
#b{
宽度：0；
身高：0；
左边框：75px实心透明；
右边框：75px实心透明；
边框底部：130px实心#FD4602；
顶部：85px；
左：170px；
}

---

因此，基本上，您可能需要一个三角形对的包装器，并使其

位置：相对

这将充当锚定点，因为我们希望子对象的位置固定或绝对，但在

左侧的位置不同

以下是我的看法：（只需根据您的愿望更改边距）

正文{
背景：#f2b6
}
.组{
位置：相对位置；
宽度：120px；
高度：135px；
浮动：左；
}
因弗特先生{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：130px 75px 0 75px；
边框颜色：#FD4602透明；
位置：绝对位置
}
.invtr2{
边框颜色：#FF6D00透明；
左：16px；
}
.tr{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 75px 130px 75px；
边框颜色：透明透明#FF6D00透明；
位置：绝对位置；
}
.tr.tr2{
边框颜色：透明透明#FD4602透明；
左：16px；
}

---

您可以尝试使用两个平行四边形

正文{
背景#f2b6；
显示：网格；
地点内容：中心；
最小高度：100vh；
}
div{
背景：线性梯度（138度，FD4602 42%，透明42%，透明58%，FF6D00 58%）；
高度：120px；
变换：倾斜（25度）；
宽度：180px；
}
部门：以前{
背景：线性梯度（138度，FF6D00 42%，透明42%，透明58%，FD4602 58%）；
内容：''；
位置：绝对位置；
左-16px；
宽度：继承；
身高：继承；
}

---

另一个想法是使用更少的代码并依靠剪辑和过滤器：

.triangle{
宽度：150px；
显示：内联块；
位置：相对位置；
滤镜：投影（20px0#FD4602）；
}
阿尔特先生{
变换：scaleY（-1）；
}
.三角形：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
剪辑路径：多边形（50%0，100%100%，0.100%）；
背景：#FF6D00；
}
.三角形：：之前{
内容：“；
显示：块；
垫顶：82%；
}

---

谢谢你！我意识到了我愚蠢的错误，同时实施了你更复杂的方法。我将每个项目“*”的背景设置为底色。因此，使“透明”边框实际上只显示形状的背景色。我犯了一个愚蠢的错误，但我还是很感激这些有用的反馈！