Skip to content

Instantly share code, notes, and snippets.

@igstan

igstan/centered_triangle.html

Forked from romannurik/centered_triangle.html
Created May 3, 2011 13:47
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 igstan/953350 to your computer and use it in GitHub Desktop.
Save igstan/953350 to your computer and use it in GitHub Desktop.
Download ZIP
A simple CSS trick to create a horizontally- or vertically-centered 'selected' callout triangle using zero images.
Raw
centered_triangle.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment