Draw a triangle using CSS border attributes
Effect
HTML: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Vc3ryb25np1_vcd4kpha + PCFkb2N0eXBlIGh0bWw + PGJyPgo8aHRtbCBsYW5nPQ = "en">
CSS Triangle Demo
Down Triangle
Up Triangle
Left Triangle
Right Triangle
CSS :( triangle.css)
. Down-triangle {
Width: 0;
Height: 0;
Border-width: 10px 10px 0 10px;
Border-style: solid;
Border-color: # dc291e transparent;
}
. Up-triangle {
Width: 0;
Height: 0;
Border-width: 0px 10px 10px 10px;
Border-style: solid;
Border-color: # dc291e transparent;
}
. Left-triangle {
Width: 0;
Height: 0;
Border-width: 10px 10px 10px 0px;
Border-style: solid;
Border-color: transparent # dc291e;
}
. Right-triangle {
Width: 0;
Height: 0;
Border-width: 10px 0px 10px 10px;
Border-style: solid;
Border-color: transparent # dc291e;
}
Github link: https://github.com/kiwiwin/css-demotriangle-demo