How is this specific design effect achieved? [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
On this site, http://kickpoint.ca/, there is a little red triangle underneath the main red section at the top
I cant for the life of me work out how it is done. I've used Chrome dev tools and cant see where it is defined.
Anyone know how it is achieved or if there is a standard way of achieving this effect?

Answer 1

CSS Triangles.
CSS
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
HTML
<div class="arrow-down"></div>
Resource
More info can be found here

Answer 2

Here's a link from CSS tricks on how to do it: http://css-tricks.com/speech-bubble-arrows-that-inherit-parent-color/
Google is your friend ;)

Answer 3

It uses CSS to make triangles. The basic concept of creating a triangle is to set the border of div on one side to form the base. The adjacent border is left blank and the borders perpendicular to the base are set to transparent. A good explanation of CSS triangles can be found here: http://css-tricks.com/snippets/css/css-triangle/
HTML
<div class="pointer">
<div class="inner"></div>
<div class="arrow"></div>
</div>
CSS
.pointer{
width: 100px;
}
.pointer .inner {
height: 25px;
background: red;
}
.pointer .arrow{
border-top: 10px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
width: 0px;
margin: 0px auto;
}
Working Example: http://jsfiddle.net/JYM8w/