|
HTML HTML5 HTMLタグ スマートフォン |
CSS CSSプロパティ CSS・HTML便利ツール |
HTML色見本 配色組み合わせツール 特殊文字 |
JAVA Android |
PHP Smarty修飾子 EXCEL |
WEBの便利ツール CSS 吹き出し ジェネレーター
見出し生成ツール
▼生成した吹き出し
あいうえおかきくけこさしすせそ
あいうえおかきくけこさしすせそ
あいうえおかきくけこさしすせそ
あいうえおかきくけこさしすせそ
見出しサンプル
あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそあいうえ
あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ
CSSコード
.sample2 {
position: relative;
color: #ffffff;
background: #333333;
font-size: 17pt ;
border: 1px solid #999999;
margin: 10px 10px 21px 10px;
padding: 10px 5px 10px 10px;
border-radius: 3px;
box-shadow:1px 1px 5px 0px #505762 ;
}
.sample2:after, .sample2:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
}
.sample2:after {
left: 40px;
border: 10px solid transparent;
border-top: 10px solid #333333;
}
.sample2:before {
left: 39px;
border: 11px solid transparent;
border-top: 11px solid #999999;
}
HTMLコード
<h3 class="sample2">
あいうえ
</h3>
▼以下を設定して下さい。