Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save killerswan/952895 to your computer and use it in GitHub Desktop.
Save killerswan/952895 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 #f00;
/*
bottom: 0;
line-height: 0;
*/
display: block;
border-bottom: 10px solid #00f;
content: 'x';
}
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