[Solved] How to get a div of such form that works in all browsers (IE10+)?

by


In order to ensure both browser compatibility AND a gradient/image background, you may find you will have to use multiple elements, as well as a pseudo element on each of the nested divs. A quick mock up can be seen below.

html {
  background: radial-gradient(red, black);
}
div.wrap {
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
  
  
  margin: 50px auto;  /*demo only*/
}
div.part1,
div.part2 {
  position: absolute;
  height: 71%;
  width: 71%;
  top: 50%;
  left: 50%;
  transform: rotate(45deg);
  transform-origin: top left;
  overflow: hidden;
}
div.part1:before {
  content: "";
  position: absolute;
  top: -150px;
  left: -150px;
  height: 300px;
  width: 300px;
  background: url(http://lorempixel.com/300/300);
  background-size: 300px 300px;
  background-position: 0 -300px;
  transform: rotate(-45deg);
}
div.part2 {
  top: -50%;
}
div.part2:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  height: 300px;
  width: 300px;
  background: url(http://lorempixel.com/300/300);
  transform: rotate(-45deg);
  background-size: 300px 300px;
  background-position: 0 50px;
}
<div class="wrap">
  <div class="part1"></div>
  <div class="part2"></div>
</div>

Please note the background position may require altering to ensure the final image is ‘in sync’ with each other.

3

solved How to get a div of such form that works in all browsers (IE10+)?