Question

所以我的布局很棘手，这让我很头疼。我放置了几个三角形（使用svg polygon），它们似乎在Chrome中可以正常工作，但在Edge和Firefox中却有一些问题。我尝试使用border和box-shadow来隐藏它，但是它没有似乎没有帮助。

有什么办法可以掩盖空白吗？（在灰色，橙色和蓝色部分上）（如果您一开始没有看到它们，请尝试重新调整窗口的大小，它会在某个时候卡住）

@ update2：为相邻的div设置边框现在看起来像是一种解决方法

我还尝试过将单个css clip-path与像梯形一样打折的多边形一起使用，但是并没有得到广泛支持。我尝试过的另一件事是使用css transform skew()，但是我发现正确定位很麻烦，因为以下部分必须相应地向一侧移动以匹配偏斜度。

如果您至少认为有更好的解决方案，请给我一个提示，我会尝试一下。

以下是带有svg三角形的版本的代码：

对于clip-path版本：

还有skew版本：

@ edit1 我发现设置渐变会有所帮助，但是它会在角落泄漏...

background: linear-gradient(left,
rgb(253, 96, 64) 0%
rgba(255,255,255,0.8) 8px,
rgba(255,255,255,0) 100%)

@ edit2 将与三角形相邻的div更改为：

border-right: 1px solid rgb(253, 96, 64);
position: relative;
margin-right: -1px;

似乎是一个不错的解决方法。我已经在沙箱中对其进行了更新。