Skip to content

Instantly share code, notes, and snippets.

@certainlyakey

certainlyakey/library.scss

Created March 10, 2014 13:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save certainlyakey/9464611 to your computer and use it in GitHub Desktop.
Save certainlyakey/9464611 to your computer and use it in GitHub Desktop.
Download ZIP
Slanted text highlight (marker-like) effect SASS mixin
Raw
library.scss
//Adapted for non-italic 13px Arial text
@mixin slanted-highlight($bgcolor, $element: span) {
#{$element} {background:$bgcolor;}
#{$element}:before {border-bottom:15px solid $bgcolor; border-left:4px solid transparent; content:""; display:inline-block; height:0; left:-4px; top:3px; width:0; position:relative;}
#{$element}:after {border-top:15px solid $bgcolor; border-right:4px solid transparent; content:""; display:inline-block; height:0; left:4px; top:3px; width:0; position:relative;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment