Skip to content

Instantly share code, notes, and snippets.

@gaarf

gaarf/safari_demo.png

Created March 24, 2011 23:26
Show Gist options
  • Save gaarf/886097 to your computer and use it in GitHub Desktop.
Save gaarf/886097 to your computer and use it in GitHub Desktop.
Download ZIP
a css triangle demo
Raw
triangle.html
<!DOCTYPE html>
<html>
<head>
<title>TRIANGLE</title>
<meta name="author" content="@gaarf">
<!-- Date: 2011-03-24 -->
<style>
#container {
float:left;
}
#container p{
border: 1px solid orange;
border-bottom:none;
padding:10px;
margin:0;
}
#bottom > div {
border-top:1px solid green;
float:left;
width:19px;
}
#bottom div.bright {
border-color:red;
width:auto;
float:none;
}
#bottom div.triangle {
height:10px;
border-color:white;
}
#bottom div.triangle b {
display:block;
height:1px;
border:1px solid blue;
border-width:0 1px;
}
</style>
</head>
<body>
<div id="container">
<p>CSS bubble with triangle outline,<br />
no position nor negative margins.</p>
<div id="bottom">
<div class="bleft"></div>
<div class="triangle">
<b style="width:17px; "></b>
<b style="width:15px; margin-left:1px"></b>
<b style="width:13px; margin-left:2px"></b>
<b style="width:11px; margin-left:3px"></b>
<b style="width:9px; margin-left:4px"></b>
<b style="width:7px; margin-left:5px"></b>
<b style="width:5px; margin-left:6px"></b>
<b style="width:3px; margin-left:7px"></b>
<b style="width:1px; margin-left:8px"></b>
<b style="width:1px; margin-left:9px; border-width:0 0 0 1px"></b>
</div>
<div class="bright"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment