我正在尝试找出如何最好地掩盖具有像这样的角度形状的 div - 如果在这种情况下顶部 div 将是背景图像,并且两个 div 都是 100% 宽度:
我看过很多关于如何用圆形遮罩图像的教程,但没有关于如何遮罩红色区域等 div 边框的教程。我知道一定有比使用位图更好的方法,但我不知所措。
最好使用 Clip-path 还是 SVG 来完成此操作?我不太关心旧版浏览器,如果结果是他们看到红色/蓝色 div 用扁线分隔。整个红色区域将成为背景图像,因此如果旧的(较旧)浏览器错过了该有角度的边框,那就这样吧。
您可以使用transform
(skew
and rotate
)无需使用即可实现此效果clip-path
支持率低
.container {
width: 500px;
height: 300px;
background: linear-gradient(lightblue, dodgerblue);
position: relative;
overflow:hidden;
}
.container:after{
position:absolute;
content:"";
width:100%;
height:100%;
left:-50%;
top:-50%;
background:#D0021B;
transform-origin: 0 100%;
transform:skewY(15deg);
}
.container:before{
position:absolute;
content:"";
width:100%;
height:100%;
left:50%;
top:-50%;
background:#D0021B;
transform-origin: 100% 0;
transform:skewY(-15deg);
}
<div class="container"></div>
对于背景图像,您应该申请top:50%
在两个pseudo-elements
.container {
width: 500px;
height: 300px;
background: url("http://i.imgur.com/5NK0H1e.jpg");
position: relative;
overflow: hidden;
}
.container:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: -50%;
top: 50%;
background: linear-gradient(lightblue,dodgerblue);
transform: skew(10deg) rotate(10deg);
}
.container:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 50%;
top: 50%;
background:linear-gradient(lightblue,dodgerblue);
transform: skew(-10deg) rotate(-10deg);
}
<div class="container"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)