HTML HTML5 HTMLタグ スマートフォン |
CSS CSSプロパティ CSS・HTML便利ツール |
HTML色見本 配色組み合わせツール 特殊文字 |
JAVA Android |
PHP Smarty修飾子 EXCEL |
▼生成した吹き出し
CSSコード
.fbox {
position: relative;
display:inline-block;
padding:10px ;
text-align:left;
background-color:#afc744;
border:2px solid #e5fcd2;
margin: 5px 5px 5px 8px;
border-radius: 7px ;
box-shadow:1px 1px 9px 0px #282828 ;
}
.fbox:after, .fbox:before {
content: "";
position: absolute;
height: 0;
width: 0;
}
.fbox:after {
top: 0px;
left: -18px;
border: 10px solid transparent;
border-right: 15px solid #afc744; /*13px*/
}
.fbox:before {
top: 2px;
left: -18px;
border: 8px solid transparent;
border-right: 8px solid #e5fcd2; /*10px*/
}
HTMLコード
<div class="fbox">
あいうえおあいうえおあいうえお
</div>
▼以下を設定して下さい。