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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • CSSでテキストに平行四辺形のマーカーを引く方法を知りたい
  • CSSにおける平行四辺形の作り方を知りたい
  • CSSの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;/*重なり順*/
}

平行四辺形風マーカーのデモ

こちらが上述した内容のデモとなります。

コピペで動くのでサクッと確認してみてくださいまし。

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

まとめ

transform:skew()を使用するとコーディングの幅が広がりますね!

「CSSのスキルアップに繋がる記事をもっと読みたい!」

という向上心溢れる方は以下の記事も目を通してみてください〜

CSSで複数行に渡ってテキストにマーカーを引く方法CSSで複数行に渡ってテキストにマーカーを引く方法 CSSで縁取り文字を作る方法CSSで縁取り文字を作る方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です