如何获得适用于所有浏览器（IE10 +）的这种格式的div？
efimovdk
我遇到这种形式的div元素的问题：
关于如何获得这种形状的任何想法？理想情况下，该解决方案至少应在IE10 +中运行。提前致谢。
不建议分割图像。我知道这一点。两侧的三角形必须透明。
大编辑
这是应该避免的。灰色背景应保持不被发现。
but
为了确保浏览器兼容性和渐变/图像背景，您可能会发现必须在每个嵌套的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>请注意，可能需要更改背景位置以确保最终图像彼此“同步”。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何实现这种格式
- 2
如何获得这种日期格式？
- 3
如何使Javascript适用于所有浏览器
- 4
Bootstrap嵌入响应式格式不适用于横向移动浏览器
- 5
DIV包装器/居中不适用于跨浏览器
- 6
jQuery无法在以IE7文档和浏览器模式运行的IE10中隐藏div
- 7
如何读取这种格式的数据？
- 8
如何以这种格式分享？
- 9
此代码在IE中均适用于所有其他浏览器
- 10
如何获得这种格式的实际日期？
- 11
如何获得这种类型的数组格式
- 12
跨浏览器的HTML5视频兼容性不适用于多种视频格式
- 13
如何创建适用于所有浏览器的CSS代码？
- 14
对齐div以在所有=> IE8的浏览器中工作
- 15
如何在EBNF中表达这种格式？
- 16
如何解析这种格式的Joda时间
- 17
如何验证这种格式的电话号码
- 18
如何优化此代码以这种格式打印？
- 19
如何从这种格式解析日期时间？
- 20
如何以这种格式遍历数组？
- 21
如何以这种格式打印星形图案 * ** *** *** ***？
- 22
如何格式化这种日期？
- 23
如何使用这种格式格式化PHP日期
- 24
如何将这种excel格式导入到这种数据库格式中？
- 25
我如何在R中获得这种精确的格式？
- 26
如何使用JQuery解析具有名称空间的xml（并适用于所有浏览器..）？
- 27
如何使用JQuery解析具有名称空间的xml（并适用于所有浏览器..）？
- 28
背景颜色不适用于所有div
- 29
.next（）不适用于所有div
我来说两句