Skip to content

Instantly share code, notes, and snippets.

@rafbm

rafbm/css-triangles.html

Created August 3, 2012 12:54
Show Gist options
  • Save rafbm/3247433 to your computer and use it in GitHub Desktop.
Save rafbm/3247433 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Triangles
Raw
css-triangles.html
<style>
div {
width: 0; height: 0;
border-style: solid;
margin: 20px;
}
div:nth-child(odd) { border-width: 32px } /* edges */
div:nth-child(even) { border-width: 24px } /* corners */
.top { border-color: red transparent transparent transparent }
.top-right { border-color: red red transparent transparent }
.right { border-color: transparent red transparent transparent }
.bottom-right { border-color: transparent red red transparent }
.bottom { border-color: transparent transparent red transparent }
.bottom-left { border-color: transparent transparent red red }
.left { border-color: transparent transparent transparent red }
.top-left { border-color: red transparent transparent red }
</style>
<body>
<div class=" top "></div>
<div class=" top-right"></div>
<div class=" right"></div>
<div class="bottom-right"></div>
<div class="bottom "></div>
<div class="bottom-left "></div>
<div class=" left "></div>
<div class=" top-left "></div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment