0

我使用以下 CSS 代码创建了一个三角形。

    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;      
    border-top: 60px solid #000;

正如我提到的#000，这个边框的背景颜色是黑色的，但现在我需要这个三角形内的图像。我尝试使用 background-image 属性向 CSS 添加另一行，但这样做是在方形背景而不是矩形背景中显示完整图像。

如何用我需要的图像显示三角形。

4

3 回答 3

0

如果您可以忽略不支持 WebKit 的浏览器，请尝试使用 -webkit-mask 属性查看掩码，以便您可以将图像掩码为三角形。

这是一篇关于它们的好文章：http: //css-tricks.com/webkit-image-wipes/

于 2012-12-16T20:28:08.410 回答
0

我不认为你可以用纯 CSS 来做到这一点并跨浏览器工作。你可以做的是在你的其他图像上放置一个中间有一个透明三角形的掩蔽图像。如果您使边看起来与页面颜色相同，则会产生图像是三角形的错觉。

您还可以使用画布并更改图像以使其成为三角形。

在 CSS 支持方面，有一些掩码设置。仅对于 Safari 和 Chrome 支持，您可以使用-webkit-mask。对于 Firefox、Safari、Chrome 和 Opera，您可以使用mask。虽然没有 IE 支持。

于 2012-12-16T15:38:25.200 回答
0

像这个例子这样的东西可以吗？

样式表：

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;    
}​
于 2012-12-16T15:40:53.267 回答