CSSで見出しの左右に1本の斜線を引く方法
左右に1本の斜線がある見出しをCSSで再現したい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装サンプル
See the Pen
CSSで見出しの左右に1本の斜線を引く方法 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
h1見出しの左右に1本の斜線がCSSで再現されてます。
実装方法は以下の通りです。
斜線のHTMLを用意
<h1><span class="line01"></span>h1見出し<span class="line02"></span></h1>
まず最初に斜線用のHTMLを用意します。
任意の見出しタグ（本記事ではh1）の中にspanタグを二つテキストの左右に差し込みます。
CSSで斜線を引く
/* 見出し */
h1 {
display: flex;
justify-content: center;
align-items: center;
}
/* 左斜線 */
.line01 {
transform: rotate(60deg);
transform-origin: 0% 0%;
width: 30px;
border-top: 3px solid #333;
margin: 0;
padding: 0;
position: relative;
top: -10px;
right: -5px;
}
/* 右斜線 */
.line02 {
transform: rotate(120deg);
transform-origin: 0% 0%;
width: 30px;
border-top: 3px solid #333;
margin: 0;
padding: 0;
position: relative;
top: -10px;
right: -20px;
}
CSSで1本の斜線を引くコード例です。
まず見出しタグにdisplay: flex;を指定して横並びにします。
次に斜線用に用意したspanタグに以下プロパティを指定します。
border-top
1本のボーダーを作成。 ボーダーの太さ・種類・色を指定します。
transform: rotate();
作成したボーダーを回転させます。
width
ボーダーの高さを指定します。
以上で斜線が再現されます。
後はpositionで位置を調整すれば実装完了です。
まとめ
CSSで見出しの左右に1本の斜線を引く方法について紹介しました。
以上で解説を終わります。
目次