我想使用 css 在三角形中显示图像 [重复]答案

【问题标题】：i want show an image in a triangle using css [duplicate]我想使用 css 在三角形中显示图像 [重复]
【发布时间】：2016-02-02 05:55:48
【问题描述】：

<img class="triangle" src="image.png"/>

CSS

.triangle{
??}

现在我想将css 应用于三角形class 以在三角形中显示图像。

【问题讨论】：

标签： html css

【解决方案1】：

我在这里给你做了一个小提琴。你需要用 div 包裹你的图片来做你想做的事：

Fiddle.

.triangle{
    position: relative;
}
.triangle:before{
    border-top: 0;
    border-right: 190px solid white;
    border-bottom: 240px solid transparent;
    border-left: 170px solid white;
    position: absolute;
    content: "";
}

<div class='triangle'>
    <img src="http://s.hswstatic.com/gif/landscape-photography-1.jpg"/>
</div>

【讨论】：

您能否详细说明其工作原理和原因？这是一个非常好的解决方案，但我很想了解为什么会这样？
@patrick，没有太多解释。使用边框，您可以创建不同的形状，例如上面示例中的三角形。 :before 伪元素通过使用relative 和absolute 定位，可以轻松地将边框放置在.triangle 元素上方。您可以在此处查看更多形状示例css-tricks.com/examples/ShapesOfCSS