|
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 ;
line-height: 1;
margin: 20px -10px 20px -10px;
padding: 10px 5px 10px 20px;
box-shadow:2px 4px 5px 0px #d9dce0 ;
border-top:3px solid #999999;
}
.sample2:after, sample2:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #333;
}
.sample2:after {
left: 0;
border-right: 5px solid #333;
}
.sample2:before {
right: 0;
border-left: 5px solid #333;
}
HTMLコード
<h3 class="sample2">
あいうえ
</h3>
▼以下を設定して下さい。