如何在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; 
}