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>
@jzaefferer
Copy link

Could you use that to display the triangle outside the element, pointing at something else?

@NickTulett
Copy link

Why not use one of the triangles from the Unicode character set?

@phloe
Copy link

phloe commented May 3, 2011

No need to use both :after and :before - one of them is sufficient.

@romannurik
Copy link
Author

@phloe I needed to use both :before and :after to do the centering. One is sufficient to make a triangle that's left or right-alined.

@jzaefferer yes, you can do that, try for starters messing with bottom:-20px and using border-top instead of border-bottom.

@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