Question

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

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

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

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

Answer 1

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

你也可以使用画布并改变图像使其成为一个三角形。

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

Answer 2

类似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;    
}

Answer 3

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

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

边框内的图像

3 个答案: