Skip to content

Instantly share code, notes, and snippets.

@dreamark
Created June 7, 2016 07:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dreamark/9546b8b1cf0881ddd3dc96c7d3de8abe to your computer and use it in GitHub Desktop.
Save dreamark/9546b8b1cf0881ddd3dc96c7d3de8abe to your computer and use it in GitHub Desktop.
/* 吹き出し */
.balloon {
overflow: hidden;
margin: 16px 8px;
font-size: 80%
}
.balloon-board-right{
float:left;
width:60%;
margin: 0;
padding: 0;
}
.balloon-icon-right {
width: 100px;
height: 100px;
float:right;
background: url("http://img.f.hatena.ne.jp/images/fotolife/h/hbpgb/20160518/20160518145026.png") no-repeat;
background-position:center center;
-moz-background-size:cover;
background-size:cover;
border-radius: 50px;
}
.balloon-serif-right{
display:block;
position:relative;
padding: 16px;
min-height:80px;
background-color: #e5e5e5;
border-radius: 10px;
border: 2px solid #ccc;
}
.balloon-serif-right:after,.balloon-serif-right:before{
position:absolute;
top: 20px;
right: -32px;
content: "";
}
.balloon-serif-right:after {
border: 19px solid transparent;
border-left-color: #e5e5e5;
margin-top: -3px;
}
.balloon-serif-right:before {
border: 16px solid transparent;
border-left-color: #ccc;
}
.balloon-board-left{
float:none;
width:95%;
margin: 0;
margin-left:3%;
padding: 0;
}
.balloon-icon-left {
width: 100px;
height: 100px;
float:left;
background: url("http://img.f.hatena.ne.jp/images/fotolife/h/hbpgb/20160518/20160518145026.png") no-repeat;
background-position:center center;
-moz-background-size:cover;
background-size:cover;
border-radius: 50px;
text-align: center;
}
.balloon-serif-left{
position:relative;
display:block;
margin: 0;
padding: 16px;
margin-left:106px;
min-height:100px;
background-color: #e5e5e5;
border-radius: 10px;
border: 2px solid #ccc;
}
.balloon-serif-left:after,.balloon-serif-left:before{
position:absolute;
top: 20px;
left: -32px;
content: "";
}
.balloon-serif-left:after {
border: 19px solid transparent;
border-right-color: #e5e5e5;
margin-top: -3px;
}
.balloon-serif-left:before {
border: 16px solid transparent;
border-right-color: #ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment