If you’re not already using a CSS preprocessor then you should probably start now. They make writing CSS much more fun. I started out with LESS shortly after starting at Fi last year but have now moved over to SASS. They’re both pretty similar but SASS has slightly more features.
One of the great things about CSS preprocessors are mixins. Below is a useful mixin I recently wrote for creating CSS triangles.
//
// arrow
//
// @param width : px, em
// @param height : px, em
// @param direction : up, down, left, right
// @param color : hex, rgb
//
//============================================================
=arrow($width: 20px, $height: 20px, $direction: up, $color: red)
width: 0
height: 0
// Right
@if $direction == right
border-top: $height/2 solid transparent
border-bottom: $height/2 solid transparent
border-left: $width solid $color
// Left
@if $direction == left
border-top: $height/2 solid transparent
border-bottom: $height/2 solid transparent
border-right: $width solid $color
// Up
@if $direction == up
border-left: $width/2 solid transparent
border-right: $width/2 solid transparent
border-bottom: $height solid $color
// Down
@if $direction == down
border-left: $width/2 solid transparent
border-right: $width/2 solid transparent
border-top: $height solid $color
You can use the mixin to create triangles at your pleasure, like this.
background-color: #e88565
height: 60px
line-height: 60px
position: absolute
text-transform: uppercase
width: 280px
&:after
+arrow(40px, 30px, down, #e88565)
content: ''
left: 0
margin: 60px 0 0 120px
position: absolute
top: 0
Have a play around with them on CodePen here.
CSS3 Mixins
Whilst we’re on the subject of mixins you should check out Matthew Wagerfield’s useful CSS3 mixins which allow you to use CSS3 features without having to worry about vendor prefixes. Check them out on GitHub here.
A useful tip for SASS is how to use variables in a string. I got a little stumped when I first started using Matt’s CSS3 mixins as I was unsure how to specify transitions on multiple attributes with a variable like this:
div
+transition(margin $transition-duration, padding $transition-duration)
The above will throw a compile error and this:
div
+transition("margin $transition-duration, padding $transition-duration")
Will obviously output this:
-webkit-transition: margin $transition-duration, padding $transition-duration;
-moz-transition: margin $transition-duration, padding $transition-duration;
-ms-transition: margin $transition-duration, padding $transition-duration;
-o-transition: margin $transition-duration, padding $transition-duration;
transition: margin $transition-duration, padding $transition-duration; }
The way to specify variables in a string is this:
div
+transition("margin #{$transition-duration}, padding #{$transition-duration}")
The above will output the expected:
-webkit-transition: margin 0.3s, padding 0.3s;
-moz-transition: margin 0.3s, padding 0.3s;
-ms-transition: margin 0.3s, padding 0.3s;
-o-transition: margin 0.3s, padding 0.3s;
transition: margin 0.3s, padding 0.3s; }
Ronildo – take a look at this – it might be what you’re looking.
16 Apr 2013I recommend using opposite-position() to simplify the triangle mix-in.
Like
“`SASS
$opposite: opposite-position($variable_of_direction_passed_in)
border-#{$opposite}: 1px solid #333
“`
Beautiful site
13 Apr 2013Is it possible to have a border on the triangle??
11 Apr 2013Good stuff. Was just in the process of doing exactly the same thing. Not familiar with the SASS syntax you’re using but could you move the entire &:after ruleset into the mixin? Would make it a little easier to use
11 Apr 2013Very useful, thanks.
You should change the “transparent borders”‘ style to “inset”, though, to get rid of a little shadow in Firefox (see the comments in this post: http://css-tricks.com/snippets/css/css-triangle/). It has no effects in the other browser and it fixes the problem in Firefox!
11 Apr 2013Awesome!
19 Mar 2013