4.5 #permalink Triangle

Toggle example guides Toggle HTML markup

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