图像内侧边框
图像内侧边框
提问于 2012-12-16 23:33:27
我使用下面的CSS代码创建了一个三角形。
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 60px solid #000;这个边框的背景颜色是黑色，正如我提到的#000，但现在我需要一个图像在这个三角形内。我尝试添加另一行到CSS的背景图像属性，但这样做是在正方形背景中显示完整的图像，而不是矩形背景。
如何显示包含所需图像的三角形。
回答 3
Stack Overflow用户
发布于 2012-12-16 23:38:25
我不认为你可以用纯CSS和跨浏览器工作来做到这一点。你可以做的是在你的另一个图像上放置一个中间有一个透明三角形的遮罩图像。如果你让边看起来和你的页面的颜色一样，它会给人一种图像是三角形的错觉。
您还可以使用canvas并更改图像，使其成为三角形。
在CSS支持方面，有一些掩码设置。仅对于Safari和Chrome支持，您可以使用-webkit-mask。对于火狐、Safari、Chrome和Opera，你可以使用mask。但是没有IE支持。
Stack Overflow用户
发布于 2012-12-16 23:40:53
像this example这样的东西能做到吗？
样式表：
div {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 60px solid #000;
position: relative;
}
div::after {
content: "";
background: url('http://lorempixel.com/40/40/'); no-repeat;
width: 40px;
height: 40px;
position: absolute;
top: -60px;
left: -20px;
}Stack Overflow用户
发布于 2012-12-17 04:28:08
如果你不想使用不支持webkit的浏览器，可以尝试使用-webkit-mask属性查看掩码，这样就可以将图像掩蔽成一个三角形。
这里有一篇关于它们的好文章：http://css-tricks.com/webkit-image-wipes/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13902806
复制相关文章
相似问题
腾讯云开发者
