Skip to content

Instantly share code, notes, and snippets.

@desmondhume

desmondhume/snippet.html

Created May 7, 2013 16:58
Show Gist options
  • Save desmondhume/5534233 to your computer and use it in GitHub Desktop.
Save desmondhume/5534233 to your computer and use it in GitHub Desktop.
Download ZIP
Pure css cross-browser arrow
Raw
snippet.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="">Scopri<span></span></a>
</body>
</html>
Raw
style.css
a {
line-height: 26px;
padding-left: 15px;
width: 100px;
background: #83b719;
display: block;
position: relative;
color: white;
font-family: "Trebuchet MS";
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
a:after {
content: "";
width: 0;
height: 0;
border-top: 13px solid transparent;
border-left: 8px solid #83b719;
border-bottom: 13px solid transparent;
position: absolute;
right: -8px;
}
a span {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 6px solid white;
border-bottom: 8px solid transparent;
display: block;
position: absolute;
right: 4px;
top: 5px;
}
a span:before {
content: "";
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 6px solid #83b719;
border-bottom: 8px solid transparent;
display: block;
position: absolute;
right: 2px;
top: -8px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment