【CSS】平行四辺形やひし形を描く!skew()を徹底解説!

プロパティ

CSSプロパティのtransform: skew(数値); について解説する記事です

たまに聞くスキューって何?画像を斜めに伸ばしたい。CSSでひし形や平行四辺形を描きたい!

そんな疑問に答えます。

transform: skew(数値); でできること

Skew

skewを使うと、要素を斜めに引き伸ばすことができます。

「長方形を平行四辺形にする」と言うとイメージしやすいかもしれません。

skewは英語で「斜め」「歪ませる」といった意味です。

skewXと書かれることもありますがskewと同じです💡

transform: skew(数値); の書き方

斜めに引き伸ばしたい要素に、transform: skew(数値); をつけるだけです。

()の中には

  • deg(度数 degree)
  • turn(回転)
  • rad(ラジアン radian)

などが入ります。個人的な感想では、

  • 文字:deg
  • 画像:turn

が使いやすいかなと思います。

プラスの値で左、マイナスの値で右に伸びます。

実際の見え方

文字

See the Pen skew-example by Yuhomyan (@yuhomyan) on CodePen.

<div class="none">Nomal</div>
<div class="skewed">Skew</div>
.none {
  height: 50px;
width: 70px;
  background-color: #ffdbf6;
}
.skewed {
  height: 50px;
  width: 70px;
  transform: skew(-10deg); 
  background-color: #c6eeee;
}

画像

画像だとこんな感じ。画像はいらすとやさんからお借りしました。

単位に使用しているturnですが、1turnで一回転です。

.nomali{
border: 1px solid #c6eeee;
height: 50px;
  width: 70px;
 background-image: url(https://1.bp.blogspot.com/-IDYpyoLGtvI/Xn1wAweibyI/AAAAAAABX7g/HTCJNWKr8_kBjz6fdo9HZnQ9KMmMSpdgACNcBGAsYHQ/s250/sweets_ichigoame3.png);
background-size: contain;
}
.skewedi{
border: 1px solid #c6eeee;
height: 50px;
  width: 70px;
  transform: skew(-0.06turn); 
 background-image: url(https://1.bp.blogspot.com/-IDYpyoLGtvI/Xn1wAweibyI/AAAAAAABX7g/HTCJNWKr8_kBjz6fdo9HZnQ9KMmMSpdgACNcBGAsYHQ/s250/sweets_ichigoame3.png);
background-size: contain;
}

skewの数値による見え方の違い

See the Pen skew-example2 by Yuhomyan (@yuhomyan) on CodePen.

上の例の様に、skew()で平行四辺形を描くと中の文字も一緒に斜めになります。

文字を入れたい場合は注意です。

skew()の中の文字を歪ませない方法

こちらの書き方をすると、中の文字が歪みません。

まずは本要素で透明なボックスを作って文字を入れ、その下に:beforeの擬似要素の平行四辺形を作って重ねています。

本要素で平行四辺形を作ってから透明な擬似要素で文字を入れることもできますが、本要素で保持を編集できるようにしておいた方が楽だと思うので:beforeで平行四辺形を作った方が良いと思います。

See the Pen skew 中の文字を歪ませない方法 by Yuhomyan (@yuhomyan) on CodePen.

おまけ:CSSでの図形制作に役立つ本

CSSを使って図形を制作するには、本で学ぶのが効率的です。

CSSで図形を作るのはまだあまりメジャーではなく、スクールやネットでもなかなか情報がありません。

この本ではCSSで様々な図形の作る方が載っていて、気になった時にすぐ調べることが出来るので、手元に1冊あると便利です。

エンジニアからクリエーターにスキルアップ!ゼロからはじめるCSS図形 

林智史

CSS3になり、本来「デザイナーに画像を作ってもらう」ことでしか対応できなかった表現が、どんどんCSSで実現できるようになってきています。デザイン方面にも興味のあるエンジニアの方におすすめ。

まとめ:skew()はCSSで並行四辺形を作る

要素を斜めにできる、skew()、skewX()の使い方でした!

トップ画の枠もtransform: skewX();を使って描いています。ソースコードはここから見れます💡

See the Pen SkewX() by Yuhomyan (@yuhomyan) on CodePen.

コメント

タイトルとURLをコピーしました