Skip to content

Instantly share code, notes, and snippets.

@vicb

vicb/css arrow

Created August 14, 2010 09:05
Show Gist options
  • Save vicb/524151 to your computer and use it in GitHub Desktop.
Save vicb/524151 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css arrow
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.tipsy { padding: 5px; font-size: 10px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: #000; color: #fff; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-arrow { position: absolute; width: 0; height: 0; border: 5px solid transparent; border-color: transparent transparent #000; }
.tipsy-n .tipsy-arrow { top: -5px; left: 50%; margin-left: -5px; }
.tipsy-nw .tipsy-arrow { top: -5px; left: 10px; }
.tipsy-ne .tipsy-arrow { top: -5px; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: -5px; left: 50%; margin-left: -5px; border-color: #000 transparent transparent; }
.tipsy-sw .tipsy-arrow { bottom: -5px; left: 10px; border-color: #000 transparent transparent; }
.tipsy-se .tipsy-arrow { bottom: -5px; right: 10px; border-color: #000 transparent transparent; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -5px; right: -5px; border-color: transparent transparent transparent #000; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -5px; left: -5px; border-color: transparent #000 transparent transparent; }
</style>
</head>
<body>
<div style="top:0;" class='tipsy tipsy-n'>
<div class='tipsy-arrow'></div>
<div class='tipsy-inner'>north</div>
</div>
<div style="top:5em;" class='tipsy tipsy-nw'>
<div class='tipsy-arrow'></div>
<div class='tipsy-inner'>north west</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment