在底部有一个三角形的面具图像

我想弄清楚如何最好地掩盖一个像角这样的形状的div - 如果在这种情况下顶部的div将是背景图像，并且两个div都会100％的宽度：在底部有一个三角形的面具图像

我见过很多的教程在那里如何与一个圆形遮罩的图像，但没有对你怎么会掩盖喜欢红色区域div的边界。我知道必须有比使用位图来做更好的方法，但是不知所措。

这是最好用剪辑路径或SVG做到这一点吗？我并不是所有人都在关注旧版浏览器，如果结果是他们看到红色/蓝色div用扁线分隔。整个红色区域将成为背景图像，所以如果老的（呃）浏览器错过了这个角度的边界，那就这样吧。

2016-04-07 hudsonian

您可以使用transform（skew和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>

来源

2016-04-07 14:05:53 Akshay

这是惊人的，虽然它看起来像它会使用背景图片限制我红色区域。我将编辑原始帖子以清楚说明。谢谢你 - 想知道使用背景图像是否有解决方案？ – hudsonian

我真的很感激这个答案 - 道歉没有在我原来的帖子更清晰。对于其他部分我不使用背景图像的人来说，这非常棒。谢谢！ – hudsonian

@hudsonian现在编辑我的答案，您也可以应用背景图片 – Akshay

如果您计划使用clip-path财产，你要注意，browser support是目前作为CSS Masking Module Level 1非常低的具有“候选人recomendation”的状态。

因此，您可以使用polygon()值与此属性使这种形状很容易：

.wrap { 
 
    width: 30%; 
 
    height: 300px; 
 
    background: #4A90E2; 
 
} 
 
.wrap div { 
 
    height: 200px; 
 
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%); 
 
      clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%); 
 
    background: url('http://i.imgur.com/5NK0H1e.jpg'); 
 
    background-size:cover; 
 
}

<div class="wrap"><div></div></div>

来源

2016-04-07 14:14:28

在底部有一个三角形的面具图像

回答

相关问题