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