Skip to content

Instantly share code, notes, and snippets.

@nybblr

nybblr/ README.md

Created January 13, 2015 17:00
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 nybblr/40ddb664eebfe4a37728 to your computer and use it in GitHub Desktop.
Save nybblr/40ddb664eebfe4a37728 to your computer and use it in GitHub Desktop.
Download ZIP
Fancy angled tags
Raw
README.md

Extracted by SnappySnippet.

Raw
index.html
<div id="DIV_1">
<h5 id="H5_2">
Tags
</h5><a href="http://www.overdigital.com/tag/android/" rel="tag" id="A_3">Android</a> <a href="http://www.overdigital.com/tag/html5/" rel="tag" id="A_4">html5</a> <a href="http://www.overdigital.com/tag/online-video/" rel="tag" id="A_5">Online Video</a> <a href="http://www.overdigital.com/tag/streaming-2/" rel="tag" id="A_6">streaming</a>
</div>
Raw
styles.css
#DIV_1 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: inline-block;
height: 44px;
letter-spacing: 2px;
min-width: 10px;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
width: 453px;
perspective-origin: 226.5px 22px;
transform-origin: 226.5px 22px;
border: 0px none rgb(255, 255, 255);
border-radius: 10px 10px 10px 10px;
font: normal normal normal normal 10px/10px Lato;
margin: 0px 0px 55px;
outline: rgb(255, 255, 255) none 0px;
padding: 3px 7px 3px 0px;
}/*#DIV_1*/
#DIV_1:after {
box-sizing: border-box;
clear: both;
color: rgb(255, 255, 255);
display: block;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
visibility: hidden;
white-space: nowrap;
width: 446px;
perspective-origin: 223px 0px;
transform-origin: 223px 0px;
content: '.';
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 10px/10px Lato;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_1:after*/
#H5_2 {
box-sizing: border-box;
float: left;
height: 16px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
width: 33px;
perspective-origin: 16.5px 8px;
transform-origin: 16.5px 8px;
font: normal normal normal normal 10px/16px Lato;
margin: 8px 16px 14px 0px;
}/*#H5_2*/
#A_3 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
float: left;
height: 30px;
letter-spacing: 2px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
width: 82px;
z-index: 10;
perspective-origin: 41px 15px;
transform-origin: 41px 15px;
background: rgb(234, 107, 0) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 10px/10px Lato;
margin: 0px 10px 2px 0px;
outline: rgb(255, 255, 255) none 0px;
padding: 10px;
transition: all 0.3s ease 0s;
}/*#A_3*/
#A_3:after {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
height: 30px;
letter-spacing: 2px;
position: absolute;
right: -8px;
text-align: center;
text-transform: uppercase;
top: 0px;
white-space: nowrap;
width: 8px;
align-self: stretch;
perspective-origin: 4px 15px;
transform-origin: 4px 15px;
content: '';
border-top: 0px solid rgba(255, 255, 255, 0);
border-right: 0px none rgb(255, 255, 255);
border-bottom: 30px solid rgba(255, 255, 255, 0);
border-left: 8px solid rgb(234, 107, 0);
font: normal normal normal normal 10px/10px Lato;
outline: rgb(255, 255, 255) none 0px;
transition: all 0.3s ease 0s;
}/*#A_3:after*/
#A_3:before {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
height: 30px;
left: -8px;
letter-spacing: 2px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 0px;
white-space: nowrap;
width: 8px;
align-self: stretch;
perspective-origin: 4px 15px;
transform-origin: 4px 15px;
content: '';
border-top: 30px solid rgba(255, 255, 255, 0);
border-right: 8px solid rgb(234, 107, 0);
border-bottom: 0px solid rgba(255, 255, 255, 0);
border-left: 0px none rgb(255, 255, 255);
font: normal normal normal normal 10px/10px Lato;
outline: rgb(255, 255, 255) none 0px;
transition: all 0.3s ease 0s;
}/*#A_3:before*/
#A_4 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
float: left;
height: 30px;
letter-spacing: 2px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
width: 64px;
z-index: 10;
perspective-origin: 32px 15px;
transform-origin: 32px 15px;
background: rgb(234, 107, 0) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 10px/10px Lato;
margin: 0px 10px 2px 0px;
outline: rgb(255, 255, 255) none 0px;
padding: 10px;
transition: all 0.3s ease 0s;
}/*#A_4*/
#A_4:after {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
height: 30px;
letter-spacing: 2px;
position: absolute;
right: -8px;
text-align: center;
text-transform: uppercase;
top: 0px;
white-space: nowrap;
width: 8px;
align-self: stretch;
perspective-origin: 4px 15px;
transform-origin: 4px 15px;
content: '';
border-top: 0px solid rgba(255, 255, 255, 0);
border-right: 0px none rgb(255, 255, 255);
border-bottom: 30px solid rgba(255, 255, 255, 0);
border-left: 8px solid rgb(234, 107, 0);
font: normal normal normal normal 10px/10px Lato;
outline: rgb(255, 255, 255) none 0px;
transition: all 0.3s ease 0s;
}/*#A_4:after*/
#A_4:before {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
height: 30px;
left: -8px;
letter-spacing: 2px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 0px;
white-space: nowrap;
width: 8px;
align-self: stretch;
perspective-origin: 4px 15px;
transform-origin: 4px 15px;
content: '';
border-top: 30px solid rgba(255, 255, 255, 0);
border-right: 8px solid rgb(234, 107, 0);
border-bottom: 0px solid rgba(255, 255, 255, 0);
border-left: 0px none rgb(255, 255, 255);
font: normal normal normal normal 10px/10px Lato;
outline: rgb(255, 255, 255) none 0px;
transition: all 0.3s ease 0s;
}/*#A_4:before*/
#A_5 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
float: left;
height: 30px;
letter-spacing: 2px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
width: 116px;
z-index: 10;
perspective-origin: 58px 15px;
transform-origin: 58px 15px;
background: rgb(234, 107, 0) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 10px/10px Lato;
margin: 0px 10px 2px 0px;
outline: rgb(255, 255, 255) none 0px;
padding: 10px;
transition: all 0.3s ease 0s;
}/*#A_5*/
#A_5:after {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
height: 30px;
letter-spacing: 2px;
position: absolute;
right: -8px;
text-align: center;
text-transform: uppercase;
top: 0px;
white-space: nowrap;
width: 8px;
align-self: stretch;
perspective-origin: 4px 15px;
transform-origin: 4px 15px;
content: '';
border-top: 0px solid rgba(255, 255, 255, 0);
border-right: 0px none rgb(255, 255, 255);
border-bottom: 30px solid rgba(255, 255, 255, 0);
border-left: 8px solid rgb(234, 107, 0);
font: normal normal normal normal 10px/10px Lato;
outline: rgb(255, 255, 255) none 0px;
transition: all 0.3s ease 0s;
}/*#A_5:after*/
#A_5:before {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
height: 30px;
left: -8px;
letter-spacing: 2px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 0px;
white-space: nowrap;
width: 8px;
align-self: stretch;
perspective-origin: 4px 15px;
transform-origin: 4px 15px;
content: '';
border-top: 30px solid rgba(255, 255, 255, 0);
border-right: 8px solid rgb(234, 107, 0);
border-bottom: 0px solid rgba(255, 255, 255, 0);
border-left: 0px none rgb(255, 255, 255);
font: normal normal normal normal 10px/10px Lato;
outline: rgb(255, 255, 255) none 0px;
transition: all 0.3s ease 0s;
}/*#A_5:before*/
#A_6 {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
float: left;
height: 30px;
letter-spacing: 2px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
width: 95px;
z-index: 10;
perspective-origin: 47.5px 15px;
transform-origin: 47.5px 15px;
background: rgb(234, 107, 0) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal normal normal 10px/10px Lato;
margin: 0px 10px 2px 0px;
outline: rgb(255, 255, 255) none 0px;
padding: 10px;
transition: all 0.3s ease 0s;
}/*#A_6*/
#A_6:after {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
height: 30px;
letter-spacing: 2px;
position: absolute;
right: -8px;
text-align: center;
text-transform: uppercase;
top: 0px;
white-space: nowrap;
width: 8px;
align-self: stretch;
perspective-origin: 4px 15px;
transform-origin: 4px 15px;
content: '';
border-top: 0px solid rgba(255, 255, 255, 0);
border-right: 0px none rgb(255, 255, 255);
border-bottom: 30px solid rgba(255, 255, 255, 0);
border-left: 8px solid rgb(234, 107, 0);
font: normal normal normal normal 10px/10px Lato;
outline: rgb(255, 255, 255) none 0px;
transition: all 0.3s ease 0s;
}/*#A_6:after*/
#A_6:before {
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
height: 30px;
left: -8px;
letter-spacing: 2px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 0px;
white-space: nowrap;
width: 8px;
align-self: stretch;
perspective-origin: 4px 15px;
transform-origin: 4px 15px;
content: '';
border-top: 30px solid rgba(255, 255, 255, 0);
border-right: 8px solid rgb(234, 107, 0);
border-bottom: 0px solid rgba(255, 255, 255, 0);
border-left: 0px none rgb(255, 255, 255);
font: normal normal normal normal 10px/10px Lato;
outline: rgb(255, 255, 255) none 0px;
transition: all 0.3s ease 0s;
}/*#A_6:before*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment