|
HTML HTML5 HTMLタグ スマートフォン |
CSS CSSプロパティ CSS・HTML便利ツール |
HTML色見本 配色組み合わせツール 特殊文字 |
JAVA Android |
PHP Smarty修飾子 EXCEL |
WEBの便利ツール CSS 吹き出し ジェネレーター
見出し生成ツール
▼生成した吹き出し
あいうえおかきくけこさしすせそ
あいうえおかきくけこさしすせそ
あいうえおかきくけこさしすせそ
あいうえおかきくけこさしすせそ
見出しサンプル
あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそあいうえおかきくけこ
あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ
CSSコード
.sample2 {
position: relative;
color: #010101;
background: #d9f565;
font-size: 18pt ;
border: 2px solid #2ee671;
margin: 10px 10px 22px 10px;
padding: 10px 5px 10px 10px;
border-radius: 3px;
box-shadow:1px 3px 7px 0px #838dd0 ;
}
.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 #d9f565;
}
.sample2:before {
left: 38px;
border: 12px solid transparent;
border-top: 12px solid #2ee671;
}
HTMLコード
<h3 class="sample2">
あいうえおかきくけこ
</h3>
▼以下を設定して下さい。