Skip to content

Instantly share code, notes, and snippets.

@paceaux

paceaux/Object-Oriented CSS Triangles

Created March 9, 2012 15:46
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 paceaux/2007175 to your computer and use it in GitHub Desktop.
Save paceaux/2007175 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Triangles
Raw
Object-Oriented CSS Triangles
.triangle{
width: 0;
height: 0;
border-width: 5em;
border-style: solid;
border-color: green;
}
.triangle.side{
border-top-color: transparent;
border-bottom-color: transparent;
}
.triangle.left{
border-right:5em transparent ;
}
.triangle.right{
border-left:5em transparent ;
}
.triangle.surface{
border-left-color: transparent;
border-right-color: transparent;
}
.triangle.top{
border-bottom: 5em transparent;
}
.triangle.bottom{
border-top: 5em transparent;
}
@paceaux
Copy link
Author

paceaux commented May 10, 2012

See my blog post about usage: http://blog.frankmtaylor.com/2012/04/05/snippets-class-friendly-css-triangles/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment