【CSS】テキストに平行四辺形のマーカーをtransform:skew()を使って引く方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

CSSでテキストに平行四辺形のマーカーを引く方法を知りたい
CSSにおける平行四辺形の作り方を知りたい
CSSのtransform:skew()を使ってみたい

という方のお悩みを解決します！

transform:skew()とは？
transform:skew()で平行四辺形を作る
疑似要素でテキストに平行四辺形風のマーカーを引く
平行四辺形風マーカーのデモ
まとめ

transform:skew()とは？

transform:skew()は要素を斜めに変形させたい場合に使用するものです。

長方形の要素を斜めに変形させることで平行四辺形を作ることができます。

X軸方向に変形させたい時はskewX()を、Y軸方向に変形させたい時はskewY()をそれぞれ使用します。

指定する単位はdeg。
正の値だと左向きの平行四辺形を、負の値を指定すると右向きの平行四辺形となります。

transform:skew()で平行四辺形を作る

基本的な使い方とtransform:skew()で作る平行四辺形のデモは以下です。

平行四辺形のHTML

<div class="Item01"></div>
<div class="Item02"></div>

平行四辺形のCSS

.Item01{
  transform: skewX(16deg);/* X軸方向に変形 */
  width: 200px;
  height: 40px;
  background: #5bc8ac;
}
.Item02{
  transform: skewY(8deg);/* Y軸方向に変形 */
  width: 200px;
  height: 40px;
  background: #5bc8ac;
  margin-top: 24px;
}

See the Pen
jOPejzg by 石森裕也 (@yuyaphotograph)
on CodePen.

疑似要素でテキストに平行四辺形風のマーカーを引く

CSSの疑似要素 afterで平行四辺形を作り、強調させたいテキストに平行四辺形風のマーカーを引く方法を紹介します。

実際のLPコーディング案件で使用した実装方法ですのでご安心なすって。

HTMLは以下のように平行四辺形マーカーを引きたいテキストをspanタグで囲ってあげましょう。

HTML

<p class="Item">
  <span class="Item-Span">平行四辺形</span>のマーカーを<span class="Item-Span">実装するよ</span>
</p>

CSSは以下のように書いてあげましょう。

平行四辺形のサイズや高さ、色、テキストとの距離はよしなに。

CSS

.Item-Span {
  position: relative;
  z-index: 1;/*重なり順*/
  font-weight: bold;
}
.Item-Span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;/*テキストとの距離*/
  width: 80px;/*平行四辺形の横幅*/
  height: 12px;/*平行四辺形の高さ*/
  display: block;
  transform: skewX(28deg);
  background: #5bc8ac;/*平行四辺形の色*/
  z-index: -1;/*重なり順*/
}