Как сделать треугольник в 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; 
}