記事内にはプロモーションが含まれています

【CSS】平行四辺形を作る方法！文字を傾けないテクニックや画像・ボタンの実装例

【CSS】平行四辺形を作る方法！文字を傾けないテクニックや画像・ボタンの実装例 CSS
2026.01.05

Webデザインにおいて、スピード感やスタイリッシュな印象を与えたいときに重宝するのが「斜めのライン」です。

特にメニューボタンや見出しの背景として「平行四辺形」を使いたい場面は多いでしょう。

CSSで平行四辺形を作るのは簡単ですが、単純に実装すると「中の文字まで一緒に傾いてしまう」という問題が発生します。

この記事では、CSSの transform: skewX() を使った基本的な作り方から、文字を傾けずに背景だけを斜めにする実践的なテクニック、さらに画像を平行四辺形に切り抜く方法までを徹底解説します。

コピペで使えるコードも用意しましたので、ぜひ活用してください。

【本記事の信頼性】
プロフィール
執筆者：マヒロ
  • 執筆者は元エンジニア
  • SES⇒大手の社内SE⇒独立
  • 現在はこじんまりとしたプログラミングスクールを運営
  • モットーは「利他の精神」

CSSで平行四辺形を作る基本 transform: skewX()

要素を斜めに歪ませるには、CSSの変形プロパティである transform と、その関数のひとつである skewX() を使用します。

.parallelogram {
    background-color: #8e44ad;
    color: white;
    padding: 15px 30px;
    display: inline-block;
    
    /* X軸方向に-20度傾ける */
    transform: skewX(-20deg);
}

■コード解説

  • transform: skewX(-20deg);：要素を横方向（X軸）に歪ませます。「deg」は角度を表し、マイナスの値を指定すると右上がりの平行四辺形になります（プラスだと左上がり）。
  • この方法の欠点は、サンプルで分かるように中のテキストまで一緒に傾いてしまい、読みづらくなることです。

文字まで傾いてしまう問題を解決する2つの方法

デザインとしてあえて文字も傾ける場合を除き、通常は「背景の形は平行四辺形にしたいけれど、文字は真っ直ぐにしたい」はずです。

これを実現するには、主に2つのアプローチがあります。

子要素を逆方向に傾ける（ネスト構造）

親要素を傾けた分だけ、中の子要素を逆方向に傾け直すことで、見た目上まっすぐに戻す方法です。

<div class="parent">
    <span class="child">文字はまっすぐ</span>
</div>

<style>
.parent {
    background-color: #3498db;
    padding: 15px 30px;
    /* 親を-20度傾ける */
    transform: skewX(-20deg);
    display: inline-block;
}

.child {
    display: block;
    /* 子を逆方向（+20度）に傾けて相殺する */
    transform: skewX(20deg);
}
</style>

■コード解説

  • 親要素で -20deg 傾け、子要素で 20deg 傾けることで、角度が相殺されて文字が垂直に戻ります。
  • HTMLの階層（親子関係）が必要になるため、構造が少し複雑になるのがデメリットです。

擬似要素を使って背景だけ傾ける【推奨】

最もおすすめなのが、擬似要素（::before や ::after）を使って背景用の平行四辺形を作り、それを文字の後ろに配置する方法です。

これならHTMLタグを増やす必要がなく、コードもきれいに保てます。

<a href="#" class="button-skew">擬似要素で実装</a>

<style>
.button-skew {
    position: relative; /* 擬似要素の基準点 */
    padding: 15px 40px;
    color: white;
    text-decoration: none;
    display: inline-block;
    z-index: 1; /* 背景より手前に文字を表示するため */
}

/* 背景となる平行四辺形を作る */
.button-skew::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e74c3c;
    
    /* 背景だけを傾ける */
    transform: skewX(-20deg);
    
    z-index: -1; /* 文字の背面に配置 */
    border-radius: 4px; /* 角丸も可能 */
}
</style>

■コード解説

  • position: relative; (親) と absolute (擬似要素)：親要素のサイズに合わせて背景を作ります。
  • transform: skewX(-20deg); (擬似要素)：背景だけを傾けているため、親要素に含まれるテキストには影響しません。
  • z-index: -1;：傾けた背景を文字の下に敷くために重要です。同時に親要素に z-index: 1; などを指定しておくと重なり順が安定します。

実践！平行四辺形のデザインパーツ集

ここまでの知識を使った、Webサイトですぐに使える実用的なデザイン例を紹介します。

スタイリッシュな「平行四辺形ボタン」

ホバーすると色が変わり、少し浮き上がるようなアニメーション付きのボタンです。

.btn-parallelogram {
    position: relative;
    display: inline-block;
    padding: 12px 30px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.3s;
    z-index: 1;
}

.btn-parallelogram::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #2ecc71, #27ae60);
    transform: skewX(-20deg);
    z-index: -1;
    transition: background 0.3s;
    border-radius: 3px;
}

/* ホバー時の動き */
.btn-parallelogram:hover {
    transform: translateY(-2px); /* 少し浮く */
}
.btn-parallelogram:hover::before {
    background: linear-gradient(45deg, #27ae60, #2ecc71); /* 色反転 */
}

アクセントになる「斜め背景の見出し」

見出しの背景として平行四辺形を使うと、スピード感のあるデザインになります。
左端を画面外に出すようなデザインも人気です。

.title-skew {
    position: relative;
    padding: 10px 20px;
    color: #fff;
    display: inline-block;
    z-index: 1;
    margin-left: 20px; /* 左側の傾き分を確保 */
}

.title-skew::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    transform: skewX(-20deg);
    z-index: -1;
}

画像を平行四辺形に切り抜く方法

画像自体を平行四辺形にしたい場合、transform: skewX() を使うと画像の中身（被写体）まで歪んでしまいます。

これを防ぐには、要素の表示領域をクリッピング（切り抜き）するプロパティ clip-path を使用するのが最適です。

.clip-image {
    width: 300px;
    height: 200px;
    object-fit: cover; /* 画像の比率を保つ */
    
    /* 左上, 右上, 右下, 左下 の座標を指定 */
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}

■コード解説

  • clip-path: polygon(...);：多角形の頂点座標を指定して切り抜きます。
  • 20% 0% (左上を少し右へ)、100% 0% (右上は端まで)、80% 100% (右下を少し左へ)、0% 100% (左下は端まで) という4点を結ぶことで、平行四辺形の形に切り抜いています。
  • この方法なら画像の中身は歪まず、形だけを変えることができます。

面倒な時はジェネレーターを活用しよう

「角度の計算が面倒」「clip-pathの座標指定が難しい」という場合は、Web上のCSSジェネレーターを活用するのも一つの手です。

  • Clippy (CSS clip-path maker)：ドラッグ操作で直感的に clip-path の形を作れるツール。平行四辺形（Parallelogram）のプリセットもあります。
  • CSS Transform Generator：skew などの変形をスライダーで調整しながらコードを生成できます。

HTML/CSSのスキルを活かして年収を上げる方法

以上、CSSで平行四辺形を作る方法を解説してきました。

なお、HTMLやCSSのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。

HTML/CSSのスキルを持つ人は多いものの、その分案件数も多く、副業エージェントやフリーランスエージェントを利用することで予想外の高単価案件が見つかることもあります。

エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。

スポンサーリンク