4.5 #permalink Triangle
A triangle that you can place either in a stand alone position or as an arrow coming out of a box.
You must add the class triangle
and a second class to determine the direction. You can make it smaller with triangle_small
, or change the colors (see below).
To learn more about this technique, see the following: ** http://apps.eky.hk/css-triangle-generator/ ** http://cssarrowplease.com/
Examples
Default styling
triangle_small
Small
Markup
<div class="triangle-parent triangle_ggPrimary2 col_ggPrimary5Lightest" style="width: 50px; height: 50px; margin: 10px">
<div class="triangle triangle_top [modifier class]"></div>
<div class="triangle triangle_right [modifier class]"></div>
<div class="triangle triangle_bottom [modifier class]"></div>
<div class="triangle triangle_left [modifier class]"></div>
</div>
Source:
modules/04_small_decorations/triangleSelector.less
, line 4