Skip to content

Instantly share code, notes, and snippets.

@wenjul
Created November 22, 2012 16:18
Show Gist options
  • Save wenjul/4131927 to your computer and use it in GitHub Desktop.
Save wenjul/4131927 to your computer and use it in GitHub Desktop.
A CodePen by wenjul. css border bubble - www.topcss.org
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div class="bubble bubble-top" style="top:20px;">
<i class="arrow-before"></i>
<i class="arrow-after"></i>
<div class="bubble-main">
<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
</div>
</div>
<div class="bubble bubble-right" style="top:150px;">
<i class="arrow-before"></i>
<i class="arrow-after"></i>
<div class="bubble-main">
<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
</div>
</div>
<div class="bubble bubble-bottom" style="top:280px;">
<i class="arrow-before"></i>
<i class="arrow-after"></i>
<div class="bubble-main">
<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
</div>
</div>
<div class="bubble bubble-left" style="top:410px;">
<i class="arrow-before"></i>
<i class="arrow-after"></i>
<div class="bubble-main">
<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
<p>bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text bubble text</p>
</div>
</div>
</body>
</html>
.bubble{
position:absolute;
border:1px solid #C4C4C4;
background-color:#F7F7F7;
border-radius:10px;
color:#333;
margin:50px;
text-align:center;
}
.bubble-main{
display:inline-blockd;
#display:inline;
#zoom:1;
padding:15px 20px;
font-size:12px;
}
.bubble-main p{
line-height:1.7;
}
.arrow-before,
.arrow-after{
position: absolute;
width:0;
height:0;
border:15px dashed transparent;
font-size:0;
}
.arrow-after {
border: 14px dashed transparent;
}
/*向上*/
.bubble-top .arrow-before,
.bubble-top .arrow-after{
bottom:100%;
left:50%;
}
.bubble-top .arrow-before{
border-bottom-style:solid;
border-bottom-color:#C4C4C4;
margin-left:-15px;
}
.bubble-top .arrow-after{
border-bottom-style:solid;
border-bottom-color:#F7F7F7;
margin-left:-14px;
}
/*向右*/
.bubble-right .arrow-before,
.bubble-right .arrow-after{
left:100%;
top:50%;
}
.bubble-right .arrow-before{
border-left-style:solid;
border-left-color:#C4C4C4;
margin-top:-15px;
}
.bubble-right .arrow-after{
border-left-style:solid;
border-left-color:#F7F7F7;
margin-top:-14px;
}
/*向下*/
.bubble-bottom .arrow-before,
.bubble-bottom .arrow-after{
top:100%;
left:50%;
}
.bubble-bottom .arrow-before{
border-top-style:solid;
border-top-color:#C4C4C4;
margin-left:-15px;
}
.bubble-bottom .arrow-after{
border-top-style:solid;
border-top-color:#F7F7F7;
margin-left:-14px;
}
/*向左*/
.bubble-left .arrow-before,
.bubble-left .arrow-after{
right:100%;
top:50%;
}
.bubble-left .arrow-before{
border-right-style:solid;
border-right-color:#C4C4C4;
margin-top:-15px;
}
.bubble-left .arrow-after{
border-right-style:solid;
border-right-color:#F7F7F7;
margin-top:-14px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment