<h2>見出しのサンプル</h2>
リボン風デザインの見出しです。
h2 {
position: relative;
height: 50px; /*リボンの高さ*/
line-height: 50px; /*文字の位置*/
padding: 0 40px; /*文字の開始位置*/
color: #ffffff; /*文字色*/
font-size: 25px; /*文字サイズ*/
background-color: #e53939; /*背景色*/
}
h2::before,
h2::after {
position: absolute;
content: '';
width: 0px;
height: 0px;
z-index: 1;
}
h2::before {
top: 0;
left: 0;
top: 0;
left: -25px;
border-width: 25px;
border-right-color: #e53939;
border-style: solid;
border-style: solid;
}
h2::after {
top: 0;
right: 0;
border-width: 25px 25px 25px 25px;
border-style: solid;
border-color: transparent #ffffff transparent transparent;
border-right-color: #ffffff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.