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の疑似要素で直角三角形を作っています。そして、 […]

カテゴリー: CSS

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

コピペですぐ使えるHTMLとCSSデザイン集[枠編](レスポンシブ対応)

cssのcontent プロパティでカウンタ（counter）やったけど連番にならずに全部1になるときは