Skip to content

Instantly share code, notes, and snippets.

Created January 11, 2012 22:19
Show Gist options
  • Save anonymous/1597122 to your computer and use it in GitHub Desktop.
Save anonymous/1597122 to your computer and use it in GitHub Desktop.
triangle
/**
* triangle
*/
body {
background: #f06;
min-height:100%;
}
#bubble {
background: #eee;
color: #2f2f2f;
padding: 20px;
border-radius: 10px;
width: 400px;
margin: 100px auto;
}
#bubble:before {
content: '';
background: #eee;
width: 20px;
height: 20px;
position: absolute;
-webkit-transform: rotate(45deg);
margin-top: -30px
}
#bubble2 {
background: #eee;
color: #2f2f2f;
padding: 20px;
border-radius: 10px;
width: 400px;
margin: 100px auto;
border: 4px solid #0f0
}
#bubble2:before {
content: '';
background: #eee;
width: 20px;
height: 20px;
position: absolute;
-webkit-transform: rotate(45deg);
margin-top: -35px;
border-left: 4px solid #0f0;
border-top: 4px solid #0f0;
}
<!-- content to be placed inside <body>…</body> -->
<div id="bubble">
This is some text in a bubble
</div>
<div id="bubble2">
This is some text in a bubble
</div>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment