{"id":192882,"date":"2015-01-11T06:52:30","date_gmt":"2015-01-11T13:52:30","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=192882"},"modified":"2015-01-11T06:52:30","modified_gmt":"2015-01-11T13:52:30","slug":"css-triangle-mixin","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/sass\/css-triangle-mixin\/","title":{"rendered":"CSS Triangle Mixin"},"content":{"rendered":"

There is a fairly popular CSS hack using transparent borders on a 0-width \/ 0-height element to mimic triangles. There is a CSS snippet<\/a> here on CSS-Tricks that depicts it. <\/p>\n

If, like me, you never quite remember how it works, be sure we can use Sass to help us. <\/p>\n

\/\/\/ Triangle helper mixin\r\n\/\/\/ @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`\r\n\/\/\/ @param {Color} $color [currentcolor] - Triangle color \r\n\/\/\/ @param {Length} $size [1em] - Triangle size\r\n@mixin triangle($direction, $color: currentcolor, $size: 1em) {\r\n  @if not index(top right bottom left, $direction) {\r\n    @error \"Direction must be either `top`, `right`, `bottom` or `left`.\";\r\n  }\r\n\r\n  width: 0;\r\n  height: 0;\r\n  content: '';\r\n  z-index: 2;\r\n  border-#{opposite-position($direction)}: ($size * 1.5) solid $color;\r\n  \r\n  $perpendicular-borders: $size solid transparent;\r\n  \r\n  @if $direction == top or $direction == bottom {\r\n    border-left:   $perpendicular-borders;\r\n    border-right:  $perpendicular-borders;\r\n  } @else if $direction == right or $direction == left {\r\n    border-bottom: $perpendicular-borders;\r\n    border-top:    $perpendicular-borders;\r\n  }\r\n}<\/code><\/pre>\n
Additional notes:<\/p>\n
* The opposite-position<\/code> function comes from Compass<\/a>; if you do not use Compass, you might need to have your own<\/a>;
\n* The mixin does not deal with positioning the triangle; it is perfectly fine to combine it with a positioning mixin<\/a> though;
\n* The content<\/code> directive is meant to allow it to be used on pseudo-elements, which actually ends up being most cases.<\/p>\n
Usage<\/h3>\n
.foo::before {\r\n  @include triangle(bottom);\r\n  position: absolute;\r\n  left: 50%;\r\n  bottom: 100%;\r\n}<\/code><\/pre>\n
.foo::before {\r\n  width: 0;\r\n  height: 0;\r\n  content: '';\r\n  z-index: 2;\r\n  border-top: 1.5em solid currentColor;\r\n  border-left: 1em solid transparent;\r\n  border-right: 1em solid transparent;\r\n  position: absolute;\r\n  left: 50%;\r\n  bottom: 100%;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
There is a fairly popular CSS hack using transparent borders on a 0-width \/ 0-height element to mimic triangles. There is a CSS snippet here on CSS-Tricks that depicts it. If, like me, you never quite remember how it works, be sure we can use Sass to help us. \/\/\/ Triangle helper mixin \/\/\/ @param […]<\/p>\n","protected":false},"author":40123,"featured_media":0,"parent":191187,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":192863,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-offset-positioning\/","url_meta":{"origin":192882,"position":0},"title":"Mixin for Offset Positioning","date":"January 11, 2015","format":false,"excerpt":"If there is one shorthand CSS dramatically misses, it is the one making it possible to define the position property, as well as the four offset properties (top, right, bottom, left). Fortunately, this is typically something that can be solved with a CSS preprocessor such as Sass. We only have\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4354,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-triangle\/","url_meta":{"origin":192882,"position":1},"title":"CSS Triangle","date":"October 6, 2009","format":false,"excerpt":"HTML You can make them with a single div. It's nice to have classes for each direction possibility. CSS The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192916,"url":"https:\/\/css-tricks.com\/snippets\/sass\/striped-gradient-mixin\/","url_meta":{"origin":192882,"position":2},"title":"Striped Gradient Mixin","date":"January 12, 2015","format":false,"excerpt":"A popular way to draw stripes in CSS it to define a linear-gradient with overlapping color-stops. It works very well but is not very convenient to write by hand... Billion dollar idea: using Sass to automatically generate it from a list of colors! \/\/\/ Stripe builder \/\/\/ @author Kitty Giraudel\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":194425,"url":"https:\/\/css-tricks.com\/snippets\/sass\/placing-items-circle\/","url_meta":{"origin":192882,"position":3},"title":"Placing Items on a Circle","date":"January 28, 2015","format":false,"excerpt":"It can be quite challenging to place items on a circle with CSS. Usually, we end up relying on JavaScript because some plugins do it all right away. However more often than not there is no good reason to do it in JavaScript rather than CSS. This is presentational purpose,\u2026","rel":"","context":"With 25 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191771,"url":"https:\/\/css-tricks.com\/snippets\/sass\/material-shadows-mixin\/","url_meta":{"origin":192882,"position":4},"title":"Material Shadows Mixin","date":"December 29, 2014","format":false,"excerpt":"Material Design has been all over the place lately. One part of it consists on stacking layers on top of each others like real paper sheets. To achieve such an effect in CSS, we need to use the box-shadow property. To avoid having to manually write the shadows every time,\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191213,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-manage-breakpoints\/","url_meta":{"origin":192882,"position":5},"title":"Mixin to Manage Breakpoints","date":"December 19, 2014","format":false,"excerpt":"Responsive Web Design creations often exist over several different breakpoints. Managing those breakpoints is not always easy. Using them and updating them can sometimes be tedious. Hence the need for a mixin to handle breakpoint configuration and usage. Simple version First you need a map of breakpoints, associated to names.\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/192882"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/40123"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=192882"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/192882\/revisions"}],"predecessor-version":[{"id":192883,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/192882\/revisions\/192883"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191187"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=192882"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=192882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}