Skip to content

Instantly share code, notes, and snippets.

@ArkahnX
Created June 22, 2012 18:02
Show Gist options
  • Save ArkahnX/2974265 to your computer and use it in GitHub Desktop.
Save ArkahnX/2974265 to your computer and use it in GitHub Desktop.
CSS for creating a 4 directional arrow aligned to the middle of an element. Only capable of one arrow per element. Does not work well with box shadows
/*** ARROW DOWN ***/
.arrow-down {
background: #ccc;
line-height: 2;
padding: 0 0 0 10px;
font-size: 16px;
border-bottom: 6px solid white;
}
.arrow-down:before,
.arrow-down:after {
content: "";
position: absolute;
top:100%;
left:50%;
right:50%;
width: 0;
height: 0;
}
.arrow-down:before {
border-width: 8px;
border-style:solid;
border-color: white transparent transparent transparent;
margin-top:6px;
margin-left:-2px
}
.arrow-down:after {
border-width: 6px;
border-style:solid;
border-color: #ccc transparent transparent transparent;
}
/*** ARROW RIGHT ***/
.arrow-right {
background: #ccc;
line-height: 2;
padding: 0 0 0 10px;
font-size: 16px;
border-right: 6px solid white;
}
.arrow-right:before,
.arrow-right:after {
content: "";
position: absolute;
left:100%;
top:50%;
width: 0;
height: 0;
}
.arrow-right:before {
border-width: 8px;
border-style:solid;
border-color: transparent transparent transparent white;
margin-left:6px;
margin-top:-8px;
}
.arrow-right:after {
border-width: 6px;
border-style:solid;
border-color: transparent transparent transparent #ccc;
margin-top:-6px;
}
/*** ARROW LEFT ***/
.arrow-left {
background: #ccc;
line-height: 2;
padding: 0 0 0 10px;
font-size: 16px;
border-left: 6px solid white;
}
.arrow-left:before,
.arrow-left:after {
content: "";
position: absolute;
right:100%;
top:50%;
width: 0;
height: 0;
}
.arrow-left:before {
border-width: 8px;
border-style:solid;
border-color: transparent white transparent transparent;
margin-right:6px;
margin-top:-8px;
}
.arrow-left:after {
border-width: 6px;
border-style:solid;
border-color: transparent #ccc transparent transparent ;
margin-top:-6px;
}
/*** ARROW UP ***/
.arrow-up {
background: #ccc;
line-height: 2;
padding: 0 0 0 10px;
font-size: 16px;
border-top: 6px solid white;
}
.arrow-up:before,
.arrow-up:after {
content: "";
position: absolute;
bottom:100%;
left:50%;
right:50%;
width: 0;
height: 0;
}
.arrow-up:before {
border-width: 8px;
border-style:solid;
border-color: transparent transparent white transparent;
margin-bottom:6px;
margin-left:-2px
}
.arrow-up:after {
border-width: 6px;
border-style:solid;
border-color: transparent transparent #ccc transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment