【CSS】要素を斜めにする方法まとめ！回転・傾き・カットのテクニック

CSSを使って要素を斜めにする方法はいくつかあります。デザインに動きをつけたり、ユニークなレイアウトを作るのに役立ちます。本記事では、CSSの rotate()、skew()、clip-path を活用して、要素を斜めにする方法を詳しく解説します。

**1. transform: rotate(); を使う（回転させる）

rotate() を使うと、要素全体を回転させることができます。

✅ 基本の使い方

.box {
  width: 100px;
  height: 100px;
  background: blue;
  transform: rotate(20deg); /* 20度回転 */
}

💡 ポイント:

• rotate(20deg); → 20度時計回りに回転。
• rotate(-20deg); → 20度反時計回りに回転。

🛠 応用テクニック

.box:hover {
  transform: rotate(10deg); /* マウスオーバーで10度回転 */
  transition: transform 0.3s ease-in-out;
}

マウスオーバー時に少し回転するアニメーションを追加すると、動きのあるデザインが作れます。

**2. transform: skew(); を使う（傾ける）

skew() を使うと、要素を台形のように変形できます。

✅ 基本の使い方

.box {
  width: 100px;
  height: 100px;
  background: red;
  transform: skew(20deg, 10deg); /* X方向に20度、Y方向に10度傾ける */
}

💡 ポイント:

• skew(20deg, 0deg); → X方向に20度傾ける。
• skew(0deg, 20deg); → Y方向に20度傾ける。
• skew(20deg, 10deg); → X方向とY方向の両方に傾ける。

🛠 応用テクニック

h2 {
  display: inline-block;
  background: yellow;
  padding: 10px;
  transform: skew(-10deg);
}

見出しを斜めに傾けることで、強調したい部分を目立たせることができます。

**3. clip-path を使う（斜めにカットする）

clip-path を使うと、要素の形を自由にカットできます。斜めのデザインを作るのに便利です。

✅ 基本の使い方

.box {
  width: 200px;
  height: 100px;
  background: green;
  clip-path: polygon(0% 0%, 100% 10%, 100% 90%, 0% 100%);
}

💡 ポイント:

• polygon(0% 0%, 100% 10%, 100% 90%, 0% 100%) → 右上と右下を斜めにカット。
• polygon(0% 10%, 100% 0%, 100% 90%, 0% 100%) → 左上と右下を斜めにカット。

🛠 応用テクニック

.section {
  width: 100%;
  height: 300px;
  background: linear-gradient(to right, #ff7eb3, #ff758c);
  clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 80%);
}

背景画像やセクション全体を斜めにカットして、デザインのアクセントにできます。

📌 どの方法を使うべき？

🎯 まとめ

• 回転させるなら → transform: rotate();
• 傾けるなら → transform: skew();
• 斜めカットなら → clip-path

これらのテクニックを活用すれば、より動きのあるデザインやユニークなレイアウトを実現できます。デザインの目的に応じて、適切な方法を選びましょう！