<h2>見出しのサンプル</h2>
四隅がはみ出したデザインの見出しです。
h2{
position: relative;
padding: 10px; /*枠の大きさ*/
text-align:center;
border-top: solid 1px #30302f; /*上の線*/
border-bottom: solid 1px #30302f; /*下の線*/
}
h2:before,h2:after{
content: '';
position: absolute;
top: -10px; /*上へ線のはみ出し量*/
width: 1px; /*線の大きさ*/
height: calc(100% + 25px); /*下へ線のはみ出し量*/
background-color: #30302f;
}
h2:before{
left: 10px;
}
h2:after{
right: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.