Html 如何在css中生成三角形

我有一个问题：我不是一个设计人员。我只是不知道如何在矩形下画这个箭头：

我试着用这个背景色做一个div，然后在下面挂一些图片，但是我现在试着做了两个小时，我完全无法找到一个以三角形形式剪切的图片工具。然后我决定通过css来做这件事，但不知怎么的我做不到

如何在css中完成这个三角形并挂起到div？我想，如果我调整窗口大小，三角形应该坚持div并且不移动

非常感谢你的帮助

HTML

<div class="arrow-down"></div>

<div id="div1"><div class="arrow-down"></div></div>

<div>
    <p>Testing triangle</p>
</div>

HTML

<div class="arrow-down"></div>

<div id="div1"><div class="arrow-down"></div></div>

<div>
    <p>Testing triangle</p>
</div>

js

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

#div1{
    width:200px;
    height:200px;
    background-color:#f00;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    position:absolute; //added position:absolute
}

$(document).ready(function () {
    $('.arrow-down').css('top', $('#div1').height() + 5).css('left', '20px');
});

或者您可以使用

：after

仅css效果

HTML

<div class="arrow-down"></div>

<div id="div1"><div class="arrow-down"></div></div>

<div>
    <p>Testing triangle</p>
</div>

---

谢谢，那个么我怎样才能使那个箭头指向父div呢？检查更新的演示。。！！伟大的工作得很有魅力！thanks@doniyor，我也做了一个