Html 如何在CSS中使用：：before和：：after将形状（转换）彼此覆盖？边缘不会在背景上显示形状

我创建了两个倾斜的形状，显示在带有背景图像的容器顶部。我使用

：：before

和

：：after

在同一个图像上获得形状

它适用于Firefox和Chrome，但不适用于edge

我错过了什么

这就是我想要的，也是在Chrome中发生的事情：

这就是Edge中发生的情况：

蓝色形状有

：：before

，但

：：before

不显示在边缘中。（当我给出蓝色形状时，会显示伪元素

：：before

，但是白色形状是不可能的

.titelscite{
z指数：0！重要；
背景色：rgba（255255,0）；
背景图片：url(https://images.pexels.com/photos/2404370/pexels-photo-2404370.jpeg);
背景位置：中心；
背景重复：无重复；
填充顶部：0px；
右侧填充：30px；
垫底：0px；
左侧填充：30px；
边缘底部：40px；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
左边距：-30px；
右边距：-30px；
位置：相对位置；
z指数：0！重要；
填充顶部：100px！重要；
}
.滴度选择：：之后{
内容：“；
背景色：#ffffff；
位置：绝对位置；
宽度：10%；
身高：100%；
左-8%；
排名：0；
z指数：0！重要；
变换原点：左下角；
-ms变换：倾斜（-16度，0度）；
-webkit变换：倾斜（-16度，0度）；
变换：倾斜（-16度，0度）；
}
.滴度选择：：之前{
内容：“；
背景色：#201547；
位置：绝对！重要；
宽度：10%；
身高：85%；
左-8%；
排名：0；
z指数：999！重要；
变换原点：左下角；
-ms变换：倾斜（-16度，0度）；
-webkit变换：倾斜（-16度，0度）；
变换：倾斜（-16度，0度）；
}

已解决

谢谢你的回复。我还注意到精简的代码在我这边起作用。因此代码必须是正确的

所以我决定在edge中使用inspect工具

我正在WordPress中以AVADA为主题构建我的网站。我发现AVADA在全幅部分的before元素上添加了一些CSS，并且CSS覆盖了所有重要的部分。（.fusion fullwidth.fusion IE mode:：before）

我补充道！对所有这些都很重要，现在一切都好了！（真不敢相信我昨天下午花了很大一部分时间试图解决这个问题；-）

解决了

谢谢你的回复。我还注意到精简的代码在我这边起作用。因此，代码必须是正确的

所以我决定在edge中使用inspect工具

我正在WordPress中以AVADA为主题构建我的网站。我发现avada只是为IE/Edge添加了一些CSS。在全宽零件的before元素上。CSS覆盖了所有重要的部分。（.fusion fullwidth.fusion ie模式：：之前）

---

我补充道！对所有这些都很重要，现在一切都好了！（真不敢相信我昨天下午花了大部分时间试图解决这个问题；-）

Hi；请包括此CSS适用的HTML-问题需要有一个帮助（链接和图像不计算）。对此表示抱歉。我更新了代码（确实去掉了内容），我在我这边测试了你的代码，Edge和Chrome没有任何区别。您可以在Chrome:，Edge:，中看到结果->。您使用的是什么版本的Edge？我的Edge版本是44.18362.1.0。如果您使用的是旧版本的Edge，则可以移动到最新版本，然后重试。感谢您的回复。我解决了（见我的答案）。我确实更新了代码片段，因为它有一个背景图像，所以其他人可以使用它，如果他们愿意的话；请包括此CSS适用的HTML-问题需要有一个帮助（链接和图像不计算）。对此表示抱歉。我更新了代码（确实去掉了内容），我在我这边测试了你的代码，Edge和Chrome没有任何区别。您可以在Chrome:，Edge:，中看到结果->。您使用的是什么版本的Edge？我的Edge版本是44.18362.1.0。如果您使用的是旧版本的Edge，则可以移动到最新版本，然后重试。感谢您的回复。我解决了（见我的答案）。我确实更新了代码片段，因为它有一个背景图像，所以其他人可以使用它，如果他们愿意的话。感谢您发布此问题的解决方案。您可以在48小时后将您的答案标记为可接受的答案，此时可进行标记。它可以在将来帮助其他社区成员解决类似的问题。感谢您的理解。感谢您发布此问题的解决方案。您可以在48小时后将您的答案标记为可接受的答案，此时可进行标记。它可以在将来帮助其他社区成员解决类似的问题。谢谢你的理解。