Skip to content

Instantly share code, notes, and snippets.

@johannaruiz
Created April 15, 2013 08:09
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 johannaruiz/5386545 to your computer and use it in GitHub Desktop.
Save johannaruiz/5386545 to your computer and use it in GitHub Desktop.
A CodePen by Johanna Ruiz. CSS Triforce webkit-dropshadow - Using pseudo elements and the filter-webkit-dropshadow property, I created this css trifore with a single empty html element.
<div class="triforce"></div>
*,
*:before,
*:after{
box-sizing:border-box;
}
html{
font-size:100%;
min-height:100%;
}
.triforce{
border-bottom:1.5em solid #FFCC00;
border-left:1em solid transparent;
border-right:1em solid transparent;
position:absolute;
display:inline-block;
height:0;
width:0;
margin:-1.5em -1em;
left:50%;
top:50%;
-webkit-filter: drop-shadow(0 2px 3px hsla(0,0%,0%,.25));
}
.triforce:before,
.triforce:after{
border-bottom: 1.5em solid #FFCC00;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
content: '';
height: 0;
position: absolute;
top: 1.5em;
width: 0;
}
.triforce:before{
left:0;
}
.triforce:after{
right:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment