Written by Kasumi

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本の斜線を引く方法について紹介しました。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

CSSだけでhover(ホバー)したら画像を拡大させる方法【jQuery不要】

2022.01.03
2235
HTMLCSS

flexboxで比率を維持したままレスポンシブに拡大縮小可能な横並びレイアウトを作ってみよう

更新日:2019.11.28
4538
HTMLCSS プログラミング

iframe内のリンク・formを別タブで開く方法

2021.11.02
4156
HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
17012