CSS三角形覆盖在图片上

Question

我正在尝试完成您在此图像顶部看到的三角形部分：

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

如果图像大小改变，我需要三角形能够响应式调整大小。 而且我不希望容器 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>

- MathieuB

---

请提供一些在 jsbin 或其他网站上的示例页面。 - alx lark

http://jsfiddle.net/37uufbg3/ - MathieuB

与图像上的透明三角形相关的问题：https://dev59.com/A2Ag5IYBdhLWcg3wS5aC - web-tiki

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 **/
}

- Vitorino fernandes

---

非常感谢。这太完美了。你知道一个好的学习CSS的地方吗？每周我都会面对一个我不知道答案的新情况。在线培训网站... - MathieuB

Answer 2

试试这个

.arrow-down {
  position:absolute;
  top:0;
  left:50%;
  width:0; 
  height:0; 
  border-left:20px solid transparent;
  border-right:20px solid transparent;   
  border-top:20px solid black;
}
.image{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
img{
  width:100%;
}

<div class="image">
   <img src="http://lorempixel.com/400/200/">
   <div class="arrow-down"></div>
</div>

如果需要进一步澄清，请添加评论。

- CerebralFart