如何在 CSS 中使用 ::before 和 ::after 将形状相互叠加（变换）？边缘不会在背景上显示形状

Question

我创建了两个倾斜的形状以显示在带有背景图像的容器顶部。我使用 ::before 和 ::after 来获取同一图像上的形状。

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

我错过了什么？

这就是我想要的以及 Chrome 中发生的事情：

https://www.dropbox.com/s/bny60o505cz2f2k/screen1.png

这就是 Edge 中发生的事情： https://www.dropbox.com/s/ix6v8gyxq0y6eo4/screen2.png

蓝色形状有::before，但::before在Edge中不显示。（当我给蓝色形状赋予伪元素 ::before 时，它会显示，但白色形状是不可能的。

.titelsectie {
    z-index:0!important;
    background-color: rgba(255,255,255,0);
    background-image: url(https://images.pexels.com/photos/2404370/pexels-photo-2404370.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 30px;
    margin-bottom: 40px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-left: -30px;
    margin-right: -30px;
    position: relative;
    z-index: 0!important;
    padding-top: 100px!important;
}
.titelsectie::after{
    content: " ";
    background-color: #ffffff;
    position: absolute;
    width: 10%;
    height: 100%;
    left: -8%;
    top: 0;
    z-index: 0!important;
    transform-origin: bottom left;
    -ms-transform: skew(-16deg, 0deg);
    -webkit-transform: skew(-16deg, 0deg);
    transform: skew(-16deg, 0deg);
}
.titelsectie::before {
    content: " ";
    background-color: #201547;
    position: absolute!important;
    width: 10%;
    height: 85%;
    left: -8%;
    top: 0;
    z-index: 999!important;
    transform-origin: bottom left;
    -ms-transform: skew(-16deg, 0deg);
    -webkit-transform: skew(-16deg, 0deg);
    transform: skew(-16deg, 0deg);
}

<div class="titelsectie">
  <div class="fusion-builder-row fusion-row ">
    <div class="fusion-layout-column fusion_builder_column fusion_builder_column_1_2 fusion-builder-column-1 fusion-one-half fusion-column-first 1_2" style="margin-top:0px;margin-bottom:20px;width:48%; margin-right: 4%;">
      <div class="fusion-column-wrapper" style="padding: 0px 0px 20px 0px;background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;" data-bg-url=""> 
    <!-- some content with text, buttons and titles--> 

      </div>
    </div>
  </div>
</div>

Answer 1

已解决！

感谢您的回复。我还注意到精简代码对我有效。因此代码必须正确。

所以我决定使用 edge 中的检查工具。

我正在使用 WordPress 构建主题为 AVADA 的网站。我发现 avada 只为 IE / Edge 添加了一些 CSS。在全宽部分的 before 元素上。 CSS 覆盖了所有重要的位。 (.fusion-fullwidth.fusion-ie-mode::之前)

我在所有这些位中添加了 !important，现在一切正常！（不敢相信我花了昨天下午的大部分时间来解决这个问题；-））

如何在 CSS 中使用 ::before 和 ::after 将形状相互叠加（变换）？边缘不会在背景上显示形状

How do I put shapes (transform) over each other with ::before and ::after in CSS? Edge wont display shape over background

html

css

css-transforms

css-shapes

microsoft-edge