如何在CSS中制作三角形

Question

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

我试图用这种背景颜色制作一个div并在它下面悬挂一些图像，但我现在试图做2个小时，我完全卡住没有找到以三角形形式切出的图像工具。然后我决定通过css这样做，但不能以某种方式做到这一点。

我如何在css中执行此三角形并挂起div？我希望如果我调整窗口大小，三角形应该坚持div并且不会移动。

许多人提前感谢您的帮助。

Answer 1

DEMO

<强> HTML

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

<强> CSS

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

Updated Demo

<强> HTML

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

<强> CSS

#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
}

<强> JS

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

或者您可以仅使用:after css效果

DEMO

<强> HTML

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

<强> CSS

div {
    margin: 50px;
    padding: 10px 20px;
    float: left;
    background-color: #f00;
    position: relative;
}
div:after {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    content:"";
    position: absolute;
    bottom: -20px;
    left: 20px;
}