CSS 3 creates small arrows common in web pages and CSS 3 creates web pages.
/* Css3 triangle (up ▲ )*/
Div. arrow-up {
Width: 0px;
Height: 0px;
Border-left: 5px solid transparent;/* Right transparent */
Border-right: 5px solid transparent;/* right transparent */
Border-bottom: 5px solid # 2f2f2f;/* define the bottom color */
Font-size: 0px;
Line-height: 0px;
}
/* Css3 triangle (down )*/
Div. arrow-down {
Width: 0px;
Height: 0px;
Border-left: 5px solid transparent;
Border-right: 5px solid transparent;
Border-top: 5px solid # 2f2f2f;
Font-size: 0px;
Line-height: 0px;
}
/* Css3 triangle (left )*/
Div. arrow-left {
Width: 0px;
Height: 0px;
Border-bottom: 5px solid transparent;/* left arrow slant */
Border-top: 5px solid transparent;/* right arrow slant */
Border-right: 5px solid # 2f2f2f;/* bottom, add background color here */
Font-size: 0px;
Line-height: 0px;
}
/* Css3 triangle (to the right )*/
Div. arrow-rightright {
Width: 0px;
Height: 0px;
Border-bottom: 5px solid transparent;/* left arrow slant */
Border-top: 5px solid transparent;/* right arrow slant */
Border-left: 5px solid # 2f2f2f;/* bottom, add background color here */
Font-size: 0px;
Line-height: 0px;
}