how to make triangle in css [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have this problem: i am not a design person. i just simply dont know how to make this arrow under the rectangle:
i tried to make a div with this background color and hang some image under it, but i am trying to do this for 2 hours now and i am totally stuck not finding a image tool which cuts out in triangle form. then i decided to do this thru css, but cannot somehow do it.
how can i do this triangle in css and hang to div? i want that if i resize window, the triangle should stick to div and doesnot move.
many many thanks for help in advance.

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');
});
or you can make use of :after only css effect
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;
}