Is there a way to overlap shapes (transform) using ::before and ::after in CSS? I'm facing an issue where Edge is not showing the shape on top

I designed two diagonal shapes to overlay a container with a background image using the pseudo elements ::before and ::after.

While this setup functions correctly in Firefox and Chrome, it is not working as expected in Edge.

What could be causing this discrepancy?

Desired outcome achieved in Chrome:

Link to Chrome view

Result in Edge: Link to Edge result

The blue shape utilizes ::before, but this pseudo element is not displaying in Edge. (When I assign the blue shape the ::before pseudo element, the white shape disappears.)

.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>

htmlcssmicrosoft-edgecss-transformscss-shapes

Answer №1

Issue Resolved!

Thank you for your input. Upon further testing, I discovered that the simplified code functioned correctly on my end, confirming its accuracy.

To investigate further, I utilized the inspect tool in Microsoft Edge.

While constructing my WordPress site using the AVADA theme, I learned that AVADA included specific CSS for Internet Explorer/Edge in the before element of the full-width section. This CSS was conflicting with essential components. (.fusion-fullwidth.fusion-ie-mode::before)

I resolved this issue by adding !important to those conflicting elements, and now everything is working smoothly! (It's hard to believe I spent a significant portion of yesterday afternoon troubleshooting this ;-) )

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the position of an unordered list element in CSS to move it lower on

I have a ul element in my navigation bar at the top of the webpage that I want to adjust slightly downwards. Take a look at the current navigation bar: image To align the text with the white bar at the top of the page, I need to move it down just a bit. ...

htmlcss

Add some pizzazz to your design using jQuery!

I have been working on a web application using asp.net c#. I have a div element where I applied the following style to it at the server side: spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden"); Now, I have a radiobutton list and ...

c#jqueryhtmlcss

Trouble with setting the color attribute using setProperty in a GXT text area

Help needed in dynamically changing the font color of a text area from the color menu. Existing attempts to change it have not been successful. Can someone provide assistance? final ColorMenu fontColorMenu = new ColorMenu(); fontColorMenu.getPalette().a ...

javahtmlcssgwtgxt

What is the best way to store plain HTML text in a database?

Currently, I am working on PHP source code to insert the page created using Quill text editor. Although the text editor data insertion is working fine, it is not inserting plain text as desired. My goal is to insert HTML plain text instead. Below is the J ...

phphtmlmysqli

How can I update the language of a button text in a React component?

Looking to update the button labels from a different language to English. Here is how it currently appears: https://i.sstatic.net/6JZ6m.png ...

javascripthtmlcssreactjs

Is it appropriate to refer to a single page application as a web 3.0 application?

As time progresses, we are witnessing the rise of more and more single page applications or frameworks such as new twitter and Sammy. It appears to be a significant advancement where we move away from generating code on the server side, with servers actin ...

javascriptjqueryajaxhtmlsinglepage

Python web scraper unable to locate specified Xpath

My question was previously posted here: Xpath pulling number in table but nothing after next span In testing, I successfully located the desired number using an XPath checker plugin in Firefox. The extracted results are displayed below. Although the XPa ...

pythonhtmlseleniumxpathselenium-webdriver

Troubleshooting strange behavior with Silex and Twig CSS caching issues

I'm facing a frustrating issue where changes I make in my CSS file are not reloading properly. The style.css file in PhpStorm appears as: body { background-color: blue; } However, when viewed in Chrome it shows: body { background-color: green; ...

cssgoogle-chrometwigphpstormsilex

How to set the default value of a select dropdown in PHP

I came across this snippet of code: <td> <select class="versionSelect"> <option value="5" <?php if($item->version === "5") echo "selected='selected'"; ?>>5</option> <option value="6" <?php ...

phphtml

The ExpressJS EJS issue arises when trying to access a property that is undefined

I'm new to NodeJS and seeking assistance. I am working on a website where users can promote their virtual conferences for others to see. I have set up a form with the POST method, where the data gets pushed into an array and then displayed in an EJS f ...

javascripthtmlexpressejsbackend

What is the best way to ensure that a child div can expand to fit within the scrollable area of its parent div

I am facing an issue with a parent div that changes size based on the content inside it. When the content exceeds the initial size, causing the parent to scroll instead of expanding, I have a child div set to 100% width and height of the parent. However, t ...

javascripthtmlcssreactjs

What could be causing the unresponsive hamburger button on my navbar?

As a beginner in HTML and Flask, I am attempting to create a navbar. However, I am encountering an issue with the hamburger button not functioning properly. When I resize the window smaller, the hamburger button appears but does not show the items like "Lo ...

htmlcssflask

Missing dots on owl carousel

Currently, I am working on a project that involves using the owlcarousel library in javascript. Everything was running smoothly until I encountered an issue. Although I have set the dots to true in the code, they are not appearing on the carousel. Below i ...

javascriptcssowl-carousel

Using jQuery to apply CSS to elements with multiple potential values

Here's a simple question: using jQuery's css function, you can retrieve the computed style of a CSS attribute. But what if there are multiple styles for that attribute being rendered simultaneously? Let's consider this example: <div id=" ...

javascriptjquerycss

Automatically include the date as a column heading along with name and ID

I recently came across a guide on how to dynamically add dates as column headers in a table. However, I encountered an issue where I couldn't add new columns for 'Name', 'Age', and 'Section' before the dynamically generat ...

javascripthtmljqueryajaxdatatable

PHP login system that retrieves information from a selected database

Currently, I am in the process of creating a login system using PHP, but I have encountered an error: Warning: mysql_select_db(): supplied argument is not a valid MySQL-Link resource in /home/a9356103/public_html/login.php on line 13 The code sni ...

phphtmlmysql

sliding to the right gets jammed

I am encountering a peculiar issue with Multi-page slide functionality. Whenever I attempt to switch pages, the new page gets stuck on the left before sliding out into position. Feel free to test this problem using my JSFiddle This is the JQuery code that ...

javascriptjqueryhtmlcssslide

Adjust the input width dynamically in Angular

Looking to dynamically adjust the width of an input field and ensure that the suffix "meters (m)" sticks close to the entered number. Additionally, I want to pass a specific value to the input using `value="something"`, which then should expand the input w ...

htmlcssangulartypescript

Creating HTML code using PHP to display two tables next to each other

My goal is to display two tables side by side in an HTML table, each ordered by a different column. I attempted this using the following code: <tbody> <td> <?php require_once "db_data.php"; $bids_results = $mysqli-& ...

phphtmlcss

Why is it that in IE9, submitting a basic form using jQuery doesn't seem to work?

Take a look at the code snippet below: <html> <head> <style type="text/css"> #myform {display:none;} </style> </head> <body> <button type="button" id="uploadbutton">Upload Images</button> <form name="myf ...

javascriptjqueryhtmlforms