コピペでOK！紙がくるんとなっているような見出しデザインが作れるHTML・CSS

イメージ

HTML

<div>
<section>
<h1>タイトル</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</section>
</div>

<div>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</section>

</div>

CSS

div{
padding:10px 0;
background-color:#ccc;
}
section{
margin:0 10px;
padding:50px 0 10px;
background-color:#fff;
position:relative;
}
h1{
width:90%;
margin:auto;
padding:10px 0;
position:absolute;
top:-8px;
left:0;
right:0;
background-color:#f55;
color:#fff;
text-align:center;
}
h1::before{
position:absolute;
top:0;
left:-8px;
width:0;
height:0;
content:"";
border:4px solid transparent;
border-bottom:4px solid #800;
border-right:4px solid #800;
}
p{
margin:0 20px;
}

div{

padding:10px 0;

background-color:#ccc;

}

section{

margin:0 10px;

padding:50px 0 10px;

background-color:#fff;

position:relative;

}

h1{

width:90%;

margin:auto;

padding:10px 0;

position:absolute;

top:-8px;

left:0;

right:0;

background-color:#f55;

color:#fff;

text-align:center;

}

h1::before{

position:absolute;

top:0;

left:-8px;

width:0;

height:0;

content:"";

border:4px solid transparent;

border-bottom:4px solid #800;

border-right:4px solid #800;

}

margin:0 20px;

}

beforeの疑似要素で直角三角形を作っています。
そして、直角三角形の分だけ、absoluteで上にマイナス値を設定。

直角三角形の作り方はこちらを参考にさせていただきました。
擬似要素を使って三角形をつくるまとめ。

イメージ

HTML

CSS

関連