Skip to content

Instantly share code, notes, and snippets.

@romannurik
Created May 3, 2011 05:43
Show Gist options
  • Save romannurik/952863 to your computer and use it in GitHub Desktop.
Save romannurik/952863 to your computer and use it in GitHub Desktop.
A simple CSS trick to create a horizontally- or vertically-centered 'selected' callout triangle using zero images.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 40px;
}
a {
display: inline-block;
height: 24px;
font-size: 24px;
line-height: 24px;
text-align: center;
font-family: helvetica, sans-serif;
text-decoration: none;
color: #000;
padding: 20px 60px;
background-color: #ddd;
margin-right: 2px;
position: relative;
}
a:target {
background-color: #333;
color: #fff;
}
a:target:before,
a:target:after {
position: absolute;
border: 10px solid transparent;
bottom: 0;
display: block;
border-bottom: 10px solid #fff;
content: '';
line-height: 0;
}
a:target:before {
right: 50%;
border-right: 0;
}
a:target:after {
left: 50%;
border-left: 0;
}
</style>
</head>
<body>
<a href="#foo" id="foo">foo</a>
<a href="#bar" id="bar">bar</a>
<a href="#baz" id="baz">baz</a>
</body>
</html>
@phloe
Copy link

phloe commented May 3, 2011

@romannurik: Yes, I know you did - but I didn't :D

Take a look at my gist fork; it uses negative margin to compensate the centering.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment