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 WordPress プログラミング

wordpressのメディアから任意の画像ファイルを素早く呼び出す方法【簡単】

2021.12.23
289
HTMLCSS

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法【CSS flexbox】

2022.10.03
706
HTMLCSS プログラミング

【簡単】tableタグをスマホでは縦並びにする方法【レスポンシブ】

2022.01.18
4126
HTMLCSS プログラミング

CSSで上付き・下付き注釈をつける書き方【コードペンデモ有り】

更新日:2020.04.21
670