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 JavaScript

スクロールバーが表示されない。SimpleBarを使おう!【即解決】

更新日:2022.09.09
6834
HTMLCSS プログラミング

【簡単】html・cssを使ってtable(テーブル)タグを角丸にする方法

2022.02.15
1114
HTMLCSS プログラミング

CSSのnth-childを使い、子要素の最初、最後、偶数奇数、何番目以降を指定する方法

更新日:2020.06.11
648
HTMLCSS プログラミング

Animate.cssでアニメーション表示を遅延(delay)させる方法

2022.04.29
1817