Clip-path CSS Hack for IE 10 and Edge

HTML & CSS
1

Hi al, I did a pyramid design for a client’s homepage (Go to https://abdju.com) using clip-path CSS property, and now I need to gracefully let other browsers that won’t show the pyramid via clip-path to show rectangles… I’ve used the following css for the pyramid:

/* CSS Document
 * im inside Child  theme
 */


.pyramid .et_pb_row {
	padding:0px;
}

body {
  background:black;
  font-size: 125%;
  display: flex;
  align-items: flex-end;
  height: 100%;
padding:0;}


.pyramid {
  	background: black;
	height:768px;
}

.zone {
  background-color: transparent;
  padding: 0 1em;
  filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.1));
}

.zone:nth-child(1)  {
  background: #32174e url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/i-and-I-250x165px.png") top center no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.5s; 
  -webkit-clip-path: polygon(50% 0, 62% 100%, 38% 100%);
  clip-path: polygon(50% 0, 62% 100%, 38% 100%);
 }

img { max-width:100%; height: auto;}

.zone:nth-child(1):hover {
  background-color: #8b56c2; 
  color: #ffffff;
}

.zone:nth-child(2) {
  -webkit-clip-path: polygon(38% 0, 62% 0, 73.75% 100%, 26.5% 100%);
  clip-path: polygon(38% 0, 62% 0, 74% 100%, 26.25% 100%);
  background: #dd0000 url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/blog-640x165.png") top center no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.01s; }

.zone:nth-child(2):hover {
  background-color: #fff8dc;
  }

.papyrus {
  -webkit-clip-path: polygon(52.5% 0, 100% 0, 100% 100%, 25% 100%);
  clip-path: polygon(52.5% 0, 100% 0, 100% 100%, 25% 100%);
  background: #f5c70f url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/papyrus-500x165px.png") top right no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.05s; }

.papyrus:hover, .soundvibes:hover {
  background-color: #b8860b;
}

.soundvibes {
  -webkit-clip-path: polygon(0 0, 49% 0, 77% 100%, 0 100%);
  clip-path: polygon(0 0, 49% 0, 77% 100%, 0 100%);
  background: #f5c70f url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/soundvibes-320x165.png") top left no-repeat;
  color: #362f2d
  animation-fill-mode: forwards;
  background-blend-mode: screen;
  transition: background-color 0.01s; }


.zone:nth-child(4) {
  background: #095309 url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/sight-up-1024x250px.png") top left no-repeat;
  -webkit-clip-path: polygon(13.5% 0, 87.5% 0, 100% 100%, 0 100%);
  clip-path: polygon(13.5% 0, 87.5% 0, 100% 100%, 0 100%);
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.05s; }

.zone:nth-child(4):hover {
    background-color: #228B22
 }


/* style fix */
.papyrus.et_pb_column_1_2 {
    margin-left: 4%;
}
.soundvibes.et_pb_column_1_2,
.papyrus.et_pb_column_1_2 {
    float: left;
    width: 46% !important
}

/*.et_pb_column_4_4 {
    text-align: center;
}
.papyrus p {
    line-height: 7em;
}
.soundvibes p {
    
}
.et_pb_column_4_4.center {

}*/

.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 165px;
}


 /* last */
.zone:nth-child(4n) {
    width: 95% !important;
    margin: 0 auto;
}

.homepage .et_pb_section {margin:0;
padding:0;}


/*media queries */

@media only screen and (max-width: 400px) {
  .pyramid {
    width: 400px;
    height: 575px;
    height: auto;
    margin: 0 auto;} 
	.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 70px;
	}
}

@media only screen and (min-width: 400px) and (max-width: 500px) {
  .pyramid {
    width: 300px;
    height: 575px;
    height: auto;
    margin: 0 auto;}
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 90px;
	}
}


@media only screen and (min-width: 500px) and (max-width: 767px) {
  .pyramid {
    width: 500px;
    height: 575px;
    height: auto;
    margin: 0 auto;}
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 110px;
} 
}



@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .pyramid {
    width: 740px;
    height: 575px;
    height: auto;
    margin: 0 auto; }
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 130px;
}
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {
  .pyramid {
    width: 1024px;
    height: 575px;
    height: auto;
	margin: 0 auto; }
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 150px;
}
}


@media only screen and (min-width: 1200px) {
.pyramid {
    width: 1024px;
    height: 575px;
    height: auto;
	margin: 0 auto; }
	
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 165px;
	}
}

/* Microsoft Edge Browser 12+ (All) - @supports method */

@supports (-ms-ime-align:auto) {
  
.pyramid div {
	width:100%;
	height: 165px;
	margin:0;
	padding:0px;
	}
	
.zone {
  background-color: transparent;
  padding: 0 1em;
  filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.1));
}

.zone:nth-child(1)  {
  background: #32174e url("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/i-and-I-1024x200.png") top center no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.5s; 
 }

img { max-width:100%; height: auto;}

.zone:nth-child(1):hover {
  background-color: #8b56c2; 
  color: #ffffff;
}

.zone:nth-child(2) {
background: #dd0000 url("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/blog-1024x200.png") top center no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.01s; }

.zone:nth-child(2):hover {
  background-color: #fff8dc;
  }

.papyrus {
background: #f5c70f url("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/papyrus-1024x200px.png") top right no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.05s; }

.papyrus:hover, .soundvibes:hover {
  background-color: #b8860b;
}

.soundvibes {
 background: #f5c70f url("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/soundvibes-1024x200px.png") top left no-repeat;
  color: #362f2d
  animation-fill-mode: forwards;
  background-blend-mode: screen;
  transition: background-color 0.01s; }
	
	.zone:nth-child(4) {
background: #095309 url("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/sight-up-1024x200px.png") top left no-repeat;  
animation-fill-mode: forwards;
background-blend-mode: multiply;
transition: background-color 0.05s; }

.zone:nth-child(4):hover {
background-color: #228B22
 }
	
}

/* Internet Explorer 10+, Microsoft Edge Browser */

_:-ms-lang(x), 	
.pyramid div {
		width:100%;
		height: 165px;
		margin:0;
		padding:0px;
	}
.pyramid div {
	width:100%;
	height: 165px;
	margin:0;
	padding:0px;
	}
	
.zone {
  background-color: transparent;
  padding: 0 1em;
  filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.1));
}

.zone:nth-child(1)  {
  background: #32174e url("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/i-and-I-1024x200.png") top center no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.5s; 
 }

img { max-width:100%; height: auto;}

.zone:nth-child(1):hover {
  background-color: #8b56c2; 
  color: #ffffff;
}

.zone:nth-child(2) {
background: #dd0000 url("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/blog-1024x200.png") top center no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.01s; }

.zone:nth-child(2):hover {
  background-color: #fff8dc;
  }

.papyrus {
background: #f5c70f url("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/papyrus-1024x200px.png") top right no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.05s; }

.papyrus:hover, .soundvibes:hover {
  background-color: #b8860b;
}

.soundvibes {
 background: #f5c70f url("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/soundvibes-1024x200px.png") top left no-repeat;
  color: #362f2d
  animation-fill-mode: forwards;
  background-blend-mode: screen;
  transition: background-color 0.01s; }
	
	.zone:nth-child(4) {
background: #095309 url("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/sight-up-1024x200px.png") top left no-repeat;  
animation-fill-mode: forwards;
background-blend-mode: multiply;
transition: background-color 0.05s; }

.zone:nth-child(4):hover {
background-color: #228B22
 }

Can anyone help me to resolve the css for Internet Explorer, or any browser that won’t render ‘clip-path’. The image attached shows the browser support for clip-path…

1369×478 59.4 KB

2

Don’t you think you should have written your code without clip-path?

3

I could have, except I didn’t know any other way. Is there a better way to achieve the same result, without using images, and still have it be responsive?

What would you suggest?

4

I’m using Firefox 50 on Ubuntu Gnome 16.04, which apparently has “partial support”, but doesn’t display the pyramid:

1278×799 462 KB

On Chromium, I see the pyramid, although the second layer down does not align correctly with the one below it.

1280×925 418 KB

May I enquire which browsers do display it correctly? (Just out of interest.)

1 Like
5

You could look at using “CSS shapes” or SVGs, these will have much wider browser support.

3 Likes
6

Firefox and Chrome seem to show it up fine…It’s okay if it is rectangular in the browsers that don’t show it. The client is already okay with the rectangular version if the pyramid doesn’t show up. So my question is really about how to target Internet Explorer and show it as full width rectangles when it won’t show as the pyramid.

I don’t really want to use the svg clip-path, as I tried it and it didn’t work. It may have been that I did it wrong using svg clip-path but clip-path worked, svg didn’t and so I went with clip-path. I don’t want to reinvent the wheel at this point, just target Internet Explorer and show the pyramid as full-width rectangles instead. If you look at my CSS, I have a hack for IE 10 and up below everything but it doesn’t seem to be working…

In answering @ronpat, it may have appeared as though I’m looking to change the method at this point. I’m not…I just want to target Internet Explorer and show full-width rectangles.

I’m sure there is a way to do that…I’m searching for that way…

7

An SVG like this will work in IE9 and later, as well as Firefox and Chrome.

<svg  version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="192" height="128.641"
	 viewBox="0 0 192 128.641" overflow="visible" enable-background="new 0 0 192 128.641" xml:space="preserve">
	<defs>
		<polygon id="triangle" points="11.568,126 96.753,1.419 161.259,126"/>
	</defs>
	<clipPath id="clip1">
		<use xlink:href="#triangle" />
	</clipPath>
	<g transform="matrix(1 0 0 1 0 0)" clip-path="url(#clip1)">
		<image width="400" height="268" xlink:href="https://lh3.googleusercontent.com/-slDCF1VQlxg/VzxDn8JIQTI/AAAAAAAAHqs/yyMNSncsRAU93Ef6nOScd2jmclOxrmVxwCCo/s150/20160414_2031.JPG"  transform="matrix(0.48 0 0 0.48 0 0)">
		</image>
	</g>
</svg>

No hacks required, unless you want to support IE8, where I would dish out PNG alternatives if I could be bothered with pleasing the 0.02% of users.

2 Likes
8

So I examined the two solutions presented - SVG and CSS shapes, and I think something that all of these solutions lack that clip-path allows is responsiveness.

I will like to retain the responsiveness of my current solution.

I really just want to insert css styles for IE 10 and EDGE so that it will gracefully degrade to full-width rectangles when the browser has no clip-path. Have you guys checked out my CSS I included, or checked it out the site in Internet Explorer? Thanks then @TechnoBear for your screenshots, etc.

9

Why don’t you use @supports and give clip path to those that support it.

You can give recatangles to all browsers and then use @supports to give clip-path to those that support it. You can undo any rules inside the @supports block that you don’t need. There’s an example here.

2 Likes
10

Responsiveness should not be a problem for either of these if set up properly.
As it stands you are getting horizontal scrollers under 400px width.

11

Awesome, changed it to the code below…see now at https://abdju.com/

/* CSS Document
 * im inside Child  theme
 */


.pyramid .et_pb_row {
	padding:0px;
}

body {
  background:black;
  font-size: 125%;
  display: flex;
  align-items: flex-end;
  height: 100%;
padding:0;}


.pyramid {
  	background: black;
	height:768px;
}

.zone {
  background-color: transparent;
  padding: 0 1em;
  filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.1));
}

.zone:nth-child(1)  {
  background-image: image("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/i-and-I-1024x200.png") top center no-repeat;
  background-color:#32174e;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.5s; 
 }

img { max-width:100%; height: auto;}

.zone:nth-child(1):hover {
  background-color: #8b56c2; 
  color: #ffffff;
}

.zone:nth-child(2) {
  background-image: image("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/blog-1024x200.png") top center no-repeat;
  background-color:#dd0000;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.01s; }

.zone:nth-child(2):hover {
  background-color: #fff8dc;
  }

.papyrus {
  background-image: image("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/papyrus-1024x200px.png") top right no-repeat;
  background-color: #f5c70f;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.05s; }

.papyrus:hover, .soundvibes:hover {
  background-color: #b8860b;
}

.soundvibes {
  background-image: url("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/soundvibes-1024x200px.png") top left no-repeat;
  background-color:#f5c70f;
  animation-fill-mode: forwards;
  background-blend-mode: screen;
  transition: background-color 0.01s; }


.zone:nth-child(4) {
  background-image: url("https://adbdju.com/wp-content/themes/Divi-child/pyramid/images/sight-up-1024x200px.png") top left no-repeat;
  background-color: #095309;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.05s; }

.zone:nth-child(4):hover {
    background-color: #228B22
 }

/*Support for Clip-path CSS*/
@supports(-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) or (clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) {

.zone:nth-child(1) {
-webkit-clip-path: polygon(50% 0, 62% 100%, 38% 100%);
clip-path: polygon(50% 0, 62% 100%, 38% 100%);
}

.zone:nth-child(2) {
  -webkit-clip-path: polygon(38% 0, 62% 0, 73.75% 100%, 26.5% 100%);
  clip-path: polygon(38% 0, 62% 0, 74% 100%, 26.25% 100%);
}

.papyrus {
  -webkit-clip-path: polygon(52.5% 0, 100% 0, 100% 100%, 25% 100%);
  clip-path: polygon(52.5% 0, 100% 0, 100% 100%, 25% 100%);
}

.soundvibes {
  -webkit-clip-path: polygon(0 0, 49% 0, 77% 100%, 0 100%);
  clip-path: polygon(0 0, 49% 0, 77% 100%, 0 100%);
}

.zone:nth-child(4) {
  -webkit-clip-path: polygon(13.5% 0, 87.5% 0, 100% 100%, 0 100%);
  clip-path: polygon(13.5% 0, 87.5% 0, 100% 100%, 0 100%);
}

.papyrus.et_pb_column_1_2 {
    margin-left: 4%;
}
.soundvibes.et_pb_column_1_2,
.papyrus.et_pb_column_1_2 {
    float: left;
    width: 46% !important
}

.zone:nth-child(4n) {
    width: 95% !important;
    margin: 0 auto;
}
  
}



/* alex style fix 
.papyrus.et_pb_column_1_2 {
    margin-left: 4%;
}
.soundvibes.et_pb_column_1_2,
.papyrus.et_pb_column_1_2 {
    float: left;
    width: 46% !important
}*/

.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 165px;
}

 /* last 
.zone:nth-child(4n) {
    width: 95% !important;
    margin: 0 auto;
}*/

.homepage .et_pb_section {margin:0;
padding:0;}


/*media queries */

@media only screen and (max-width: 400px) {
  .pyramid {
    width: 400px;
    height: 575px;
    height: auto;
    margin: 0 auto;} 
	.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 70px;
	}
}

@media only screen and (min-width: 400px) and (max-width: 500px) {
  .pyramid {
    width: 300px;
    height: 575px;
    height: auto;
    margin: 0 auto;}
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 90px;
	}
}


@media only screen and (min-width: 500px) and (max-width: 767px) {
  .pyramid {
    width: 500px;
    height: 575px;
    height: auto;
    margin: 0 auto;}
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 110px;
} 
}



@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .pyramid {
    width: 740px;
    height: 575px;
    height: auto;
    margin: 0 auto; }
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 130px;
}
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {
  .pyramid {
    width: 1024px;
    height: 575px;
    height: auto;
	margin: 0 auto; }
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 150px;
}
}


@media only screen and (min-width: 1200px) {
.pyramid {
    width: 1024px;
    height: 575px;
    height: auto;
	margin: 0 auto; }
	
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 165px;
	}
}
12

I see it now you post the css.

@media only screen and (max-width: 400px) {
  .pyramid {
    width: 400px;
    height: 575px;
    height: auto;
    margin: 0 auto;}

You are actually making the pyramid go wider on the smallest screens.
You could probably just remove that 400px query altogether and it should be better.

I notice you seem to be repeating the same properties with the same values over and over in the queries. There should be no need to do that due to the cascading nature of Cascading Style Sheets. Not having the double sided queries should also help with that.

Looking at it another way. You could probably do without most of those queries anyway.
It appears you are doing what is referred to as “adaptive design” as opposed to “fluid design”. That is to use a lot of “rigid” rules, like fixed width and heights, then add a whole load of media queries to adjust them at different sizes.
Making things fluid will allow them to adjust to almost any size without the need for intervention through queries.

1 Like
13

Okay thanks, I understand, can you refer an article or example that helps me distinguish between adaptive and fluid? I get it in theory but I’m not sure exactly what to change in the code.

And yes I’ll remove the 400px media query… Thanks a lot for the assistance so far!

14

I can’t think of one off-hand.
It is a fairly big subject, but I’ll have a go at a simple example that will illustrate to principle.

15

This example just deals with images for now. The top image uses adaptive design, I used 3 different queries to get it to shrink down to the target 320px screen width.
The second image is fluid, that needed just 2 css rules to work at any size.

16

My far from perfect definition of the difference would be

Adaptive - if the view-port has these dimensions, use this content this way so it will fit.

Responsive - if the view-port has these dimensions, let the content adjust itself this way so it will fit.

17

Awesome! Thanks @Mittineague and @SamA74

I fixed it so it’s fluid now…

Ok so the last thing I have to do with this is to insert a tooltip on each area on the pyramid. The tricky thing is that I don’t have any text inside the pyramid areas, to attach the <a> tags to…

Should I start a new topic, or does anyone want to help me with that inside this topic? …I inserted the tooltip css in the code is below:

/* CSS Document
 * im inside Child  theme
 */

  .pyramid {
    max-width:100%;
    height: auto;
	background: black;
}
	  
.pyramid .et_pb_row {
	padding:0px;
}

body {
  background:black;
  font-size: 125%;
  display: flex;
  align-items: flex-end;
  height: 100%;
padding:0;}

.zone {
  background-color: transparent;
  padding: 0 1em;
  filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.1));
}

.zone:nth-child(1)  {
  background: #32174e url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/i-and-I-1024x200.png") top center no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode:luminosity; 
  transition: background-color 0.5s; 
 }

img { max-width:100%; height: auto;}

.zone:nth-child(1):hover {
  background-color: #8b56c2; 
}

.zone:nth-child(2) {
  background: #dd0000 url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/blog-1024x200.png") top center no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.01s; }

.zone:nth-child(2):hover {
  background-color: #fff8dc;
  background-blend-mode: luminosity;
  }

.papyrus {
  background: #f5c70f url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/papyrus-1024x200px.png") top right no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: hard-light;
  transition: background-color 0.05s; }

.papyrus:hover, .soundvibes:hover {
  background-color: #b8860b;
}

.soundvibes {
  background: #f5c70f url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/soundvibes-1024x200px.png") top left no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode:hard-light;
  transition: background-color 0.01s; }


.zone:nth-child(4) {
  background: #095309 url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/sight-up-1024x200px.png") top left no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode:darken;
  transition: background-color 0.05s; }

.zone:nth-child(4):hover {
    background-color: #228B22
 }

/*Support for Clip-path CSS*/
@supports(-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) or (clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) {

.zone:nth-child(1) {
background: #32174e url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/i-and-I-250x165px.png") top center no-repeat;
-webkit-clip-path: polygon(50% 0, 62% 100%, 38% 100%);
clip-path: polygon(50% 0, 62% 100%, 38% 100%);
}

.zone:nth-child(2) {
  background: #dd0000 url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/blog-445x165.png") top center no-repeat;
  -webkit-clip-path: polygon(38% 0, 62% 0, 73.75% 100%, 26.5% 100%);
  clip-path: polygon(38% 0, 62% 0, 74% 100%, 26.25% 100%);
}

.papyrus {
  background: #f5c70f url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/papyrus-500x165px.png") top right no-repeat;
  -webkit-clip-path: polygon(52.5% 0, 100% 0, 100% 100%, 29% 100%);
  clip-path: polygon(52.5% 0, 100% 0, 100% 100%, 29% 100%);
}

.soundvibes {
  background: #f5c70f url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/soundvibes-320x165.png") top left no-repeat;
  -webkit-clip-path: polygon(0 0, 47.5% 0, 70% 100%, 0 100%);
  clip-path: polygon(0 0, 47.5% 0, 70% 100%, 0 100%);
}

.zone:nth-child(4) {
  -webkit-clip-path: polygon(12.5% 0, 87% 0, 100% 100%, 0 100%);
  clip-path: polygon(12.5% 0, 87% 0, 100% 100%, 0 100%);
}

/*.papyrus.et_pb_column_1_2 {
    margin-left: 4%;
}*/
.soundvibes.et_pb_column_1_2,
.papyrus.et_pb_column_1_2 {
    float: left;
    width: 50% !important
}

.zone:nth-child(4n) {
    width: 95% !important;
    margin: 0 auto;
}
  
}


/* alex style fix 
.papyrus.et_pb_column_1_2 {
    margin-left: 4%;
}
.soundvibes.et_pb_column_1_2,
.papyrus.et_pb_column_1_2 {
    float: left;
    width: 46% !important
}*/

.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 165px;
}

 /* last 
.zone:nth-child(4n) {
    width: 95% !important;
    margin: 0 auto;
}*/

.homepage .et_pb_section {margin:0;
padding:0;}


/*media queries */

/*@media only screen and (max-width: 400px) {
  .pyramid {
    width: 400px;
    height: 575px;
    height: auto;
    margin: 0 auto;}
	.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 70px;
	}
}

@media only screen and (min-width: 400px) and (max-width: 500px) {
  .pyramid {
    width: 300px;
    height: 575px;
    height: auto;
    margin: 0 auto;}
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 90px;
	}
}


@media only screen and (min-width: 500px) and (max-width: 767px) {
  .pyramid {
    width: 500px;
    height: 575px;
    height: auto;
    margin: 0 auto;}
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 110px;
} 
}



@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .pyramid {
    width: 740px;
    height: 575px;
    height: auto;
    margin: 0 auto; }
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 130px;
}
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {
  .pyramid {
    width: 1024px;
    height: 575px;
    height: auto;
	margin: 0 auto; }
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 150px;
}
}

@media only screen and (min-width: 1200px) {
.pyramid {
    width: 1024px;
    height: 575px;
    height: auto;
	margin: 0 auto; }*/
	
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 165px;
	}
}

/* Tooltip */
[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

The HTML that triggers it is:

<div class="homepage"> <div class="et_pb_gutters4 pyramid"> <div class="et_pb_row"> <div class="et_pb_row_fullwidth"> <div class="zone et_pb_column_4_4"><span data-tooltip=“i and I” data-tooltip-position=“bottom”><a class="tooltip" href="https://abdju.com/i-and-i/"></a></span></div> <div class="zone et_pb_column_4_4"><span data-tooltip=“Blog” data-tooltip-position=“bottom”><a class="tooltip" href="https://abdju.com/blog/"></a></span></div> <div class="et_pb_column_4_4 clear center"> <div class="papyrus et_pb_column_1_2"><span data-tooltip=“Papyrus” data-tooltip-position=“bottom”><a class="tooltip" href="https://abdju.com/product-category/papyrus/"></a></span></div> <div class="soundvibes et_pb_column_1_2"><span data-tooltip=“Soundvibes” data-tooltip-position=“bottom”><a class="tooltip" href="https://abdju.com/product-category/soundvibes/"></a></span></div> </div><div class="zone et_pb_column_4_4 clear"><span data-tooltip=“Sight up” data-tooltip-position=“bottom”><a class="tooltip" href="https://abdju.com/product-category/sightup/"></a></span></div> </div> </div> </div> </div> <!-- #main-content -->
18

I just want to mention that the posted html (and the online page) happen to have left and right “wordprocessor double quotation marks” i.e. $201C and $201D. That does not work, it should be the ascii quotation mark $0022. You have both variants in the posted html (and in the page).

Please correct those quotation marks.

1 Like
19

I tried to fix it… I’m going to put the tooltip issue into a new topic…

20

Can anyone help me with this? I want Firefox and Internet Explorer to bring the ‘Soundvibes’ area of the pyramid [the second half of the pyramid which is split in two (in yellow)] up to the left (float: left;)

See here: https://abdju.com

I’m using this code to force it left, but it’s not working… I got these from this page’s advice:
http://browserhacks.com/

@media screen\0 {.soundvibes {float:left;}}
@media screen\9 {.soundvibes {float:left;}}

.soundvibes, x:-moz-any-link, x:default {float:left;}

See what it looks like now in Firefox and Internet Explorer…

1007×1249 295 KB