html - 如何在css中制作三角形

Question

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

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

我怎样才能在css中做这个三角形并挂到div？我希望如果我调整窗口大小，三角形应该粘在 div 上并且不会移动。

非常感谢您提前提供的帮助。

Answer 1

演示

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

更新的演示

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 效果

演示

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