如何获得适用于所有浏览器（IE10+）的这种形式的 div？

Question

我遇到了这种形式的 div 元素的问题：

关于如何得到这个形状有什么想法吗？理想情况下，该解决方案至少应在 IE10+ 中运行。提前致谢。

不建议拆分图片。我知道这一点。两边的三角形必须是透明的。

大大大大编辑

这是应该避免的。灰色背景应保持未覆盖状态。

Answer 1

尝试彩色 CSS 三角形，绝对位于正方形的左侧和右侧，以在顶部和底部产生透明三角形的错觉。

演示 JS fiddle 此处

https://jsfiddle.net/32w08myL/

HTML

<div id="square">
  <div class="triangle-left"></div>
  <div class="triangle-right"></div>
</div>

CSS

#square{
  width: 400px;
  height: 400px;
  background-image: url("https://unseenflirtspoetry.files.wordpress.com/2012/05/homer-excited.png");
  background-color: blue;
  background-repeat: no-repeat;
  display: block;
  float: left;
  position: relative;
}

.triangle-left{
  width: 0; 
  height: 0; 
  border-top: 200px solid transparent;
  border-bottom: 200px solid transparent;
  border-left: 200px solid #f3f5f6;
  position: absolute;
  top: 0; left: 0;
}

.triangle-right{
  width: 0; 
    height: 0; 
    border-top: 200px solid transparent;
    border-bottom: 200px solid transparent; 
    border-right:200px solid #f3f5f6; 
  position: absolute;
  top: 0; right: 0;
}

Answer 2

是这样的吗？

div {
  position: relative;
  width: 400px;
  display: inline-block;
  height: 200px;
}

div:before,
div:after {
  background-image: url('http://www.wired.com/wp-content/uploads/2015/05/the-simpsons.jpg');
  background-size: 400px 200px;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100px;
  content: '';
}

div:before {
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background-position: 0 0;
}

div:after {
  top: 100px;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-position: 0 50%;
}

<div></div>

Answer 3

为了确保浏览器兼容性和 gradient/image 背景，您可能会发现必须使用多个元素，以及在每个嵌套 div 上使用伪元素。下面是一个快速模型。

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>

^{请注意背景位置可能需要更改以确保最终图像彼此 'in sync'。}

如何获得适用于所有浏览器（IE10+）的这种形式的 div？

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

javascript

css

css-shapes

HTML

CSS