CSS 三 Angular 形和 IMG

Question

我正在尝试制作您在这张图片顶部看到的三 Angular 形部分:

我尝试了几种方法都没有成功。

如果图像改变大小，我需要三 Angular 形响应。 而且我不希望容器 div 因为三 Angular 形而扩展。 但我无法修复 div 高度，因为它会随着图像大小的变化而变化。 我不想在 photoshop 中制作三 Angular 形并导出图像，因为当您单击它时，您也会看到三 Angular 形。

知道如何以正确的方式实现这一点吗？

这是我尝试过的:

http://jsfiddle.net/37uufbg3/

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;   
    border-top: 20px solid #f00;
}
.image{
    width:100%;
}

<div class="imageTriangle">
    <img src="image.jpg">
    <div class="arrow-down"></div>
</div>

Answer 1

为图像使用伪元素:after

演示 - http://jsfiddle.net/victor_007/dvv7bg76/

这个例子不适用于ie8

.image:after {
    content:'';
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;   
    border-top: 20px solid #f00;
    position:absolute;
    left:50%;
    top:0;
    transform:translatex(-50%); /** making it horizontally center **/
}

或者对于旧的浏览器你也可以使用这个

演示 - http://jsfiddle.net/victor_007/dvv7bg76/1/

这将适用于 ie8

.image:after {
    content:'';
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    position:absolute;
    left:50%;
    top:0;
    margin-left:-20px; /** for older browsers **/
}