CSS三角形和IMG

Question

我正在尝试做在这张图片上方看到的三角形部分：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9XMDVSVi5qcGcifQ==” alt =“在图像上方的三角形的示例”>

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

如果图像更改大小，我需要三角形具有响应能力。而且我不希望容器div由于三角形而扩大。但是我无法固定div的高度，因为如果图像尺寸改变，它的高度也会改变。我不想在photoshop中创建三角形并导出图像，因为当您单击它时，您也会看到三角形。

任何想法如何实现正确的方法？

这是我尝试过的：

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

Answer 2

尝试一下