Growth Hackで得た知見やWeb制作の備忘録をまとめています。

This is standard

CSS

transform: skew();で画像を使わずCSSだけでテープのような斜め背景を装飾する

投稿日:

See the Pen maker background by This is standard (@koutafunahashi) on CodePen.

p.tis{
  padding: 0 16px;
  background-color: #FCDF42;
  transform: skew(-16deg,0deg);
  display: inline-block;
}

p.tis span{
  display: block;
  transform: skew(16deg,0deg);
}

ポイントはtransform: skew();で、親要素 (p) と子要素 (span) に追加します。

子要素にも追加しないとテキストも斜めになってしますので、値を反転して要素をあてます。
もう一つのポイントとして、子要素がインライン要素の時はブロック要素にしましょう。

画像を使わず、ちょっとした装飾を施しました。

-CSS

Copyright© This is standard , 2019 All Rights Reserved Powered by STINGER.