我在构建这个网站
http://mindcloak.com/vici/时遇到了这个问题。
我的解决方法是在这些浏览器上隐藏剪辑路径并使用CSS形状。
常规剪辑路径。
.tri-green-left {
width: 101%;
height: 400px;
position: absolute;
z-index: 15;
background: rgba(93,140,127,0.7);
-webkit-clip-path: polygon(0 0, 5% 0, 25% 100%, 0 100%);
clip-path: polygon(0 0, 5% 0, 25% 100%, 0 100%);
}
使用 CSS 形状展示在不支持的浏览器中
/* IE 10+ 样式相关 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#triangle-greenleft {
width: 0;
height: 0;
margin-top: -50px;
border-bottom: 900px solid rgba(93,140,127,0.7);
border-right: 750px solid transparent;
overflow: hidden;
}
/* Edge 浏览器支持 */
@supports (-ms-ime-align:auto) {
#triangle-greenleft {
width: 0;
height: 0;
border-bottom: 700px solid rgba(93,140,127,0.7);
border-right: 200px solid transparent;
overflow: hidden;
}
code .style-svg { -webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0); clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0); }
- AndrewCoCo