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

2020年6月6日2020年12月21日

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

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

そんな疑問に答えます。

Contents

1. transform: skew(数値); でできること
2. transform: skew(数値); の書き方
3. 実際の見え方
4. skewの数値による見え方の違い
5. skew()の中の文字を歪ませない方法
6. おまけ：CSSでの図形制作に役立つ本
7. まとめ：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;
}