You must login to edit.

Sign In
Vup

2

CSS3 comic bubble using triangle trick

You must login to vote.

Login with Twitter

Comic bubble and triangle inspired by http://jonrohan.me/guide/css/creating-triangles-in-css/

 <html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title></title>
	<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
	
	<style>
	.chat-bubble {
	  background-color:#EDEDED;
	  border:2px solid #666666;
	  font-size:35px;
	  line-height:1.3em;
	  margin:10px auto;
	  padding:10px;
	  position:relative;
	  text-align:center;
	  width:300px;
	  -moz-border-radius:20px;
	  -webkit-border-radius:20px;
	  -moz-box-shadow:0 0 5px #888888;
	  -webkit-box-shadow:0 0 5px #888888;
  font-family: 'Bangers', arial, serif; 
	
	}
	.chat-bubble-arrow-border {
	  border-color: #666666 transparent transparent transparent;
	  border-style: solid;
	  border-width: 20px;
	  height:0;
	  width:0;
	  position:absolute;
	  bottom:-42px;
	  left:30px;
	
	}
	.chat-bubble-arrow {
	  
	  border-color: #EDEDED transparent transparent transparent;
	  border-style: solid;
	  border-width: 20px;
	  height:0;
	  width:0;
	  position:absolute;
	  bottom:-39px;
	  left:30px;
	} 
	</style>
</head>
	<body>
		<div class="chat-bubble">
Hi There!
		  <div class="chat-bubble-arrow-border"></div>
		  <div class="chat-bubble-arrow"></div>
		</div>
	</body>
</html>


blog comments powered by Disqus View All Snippets