塗りつぶしタイトルが上に乗っかったボックス
塗りつぶしたタイトルが上に乗っかったボックスです。高さと色で目立つボックスとなります。
ボックスの見出し
ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。
Source Code
右上の「コピー」からご利用ください。
コピー
<div class="my-parts">
<div class="my-parts-title">ボックスの見出し</div>
<p>ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。</p>
</div>コピー
.my-parts {
display: inline-block;
width: 300px;
max-width: 100%;
border: 2px solid #2196F3;
border-radius: 0px;
padding: .8em;
margin-top: 1.5em;
position: relative;
text-align: left;
}
.my-parts .my-parts-title {
padding: .2em .4em;
font-size: 1.1em;
font-weight: bold;
position: absolute;
bottom: 100%;
left: -2px;
background: #2196F3;
color: #fff;
border-radius: 4px 4px 0 0;
}
.my-parts > :last-child {
margin-bottom: 0;
}
