Created
June 7, 2016 07:43
-
-
Save dreamark/9546b8b1cf0881ddd3dc96c7d3de8abe to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 吹き出し */ | |
.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