【CSS】斜めの背景やリンクを設定する方法

RELEASE / 2024.8.19 UPDATE / 2024.08.17

clip-path

css

skew

斜め

デザイナーがちょっとした遊び心で斜めのコンテンツを作ったとします。
それをコーダーがHTMLとCSSで実現するには少し工夫が必要になります。
この記事では、CSSで作る斜めの背景やリンクを設定する方法をご紹介したいと思います。

この記事の目次を表示

1 CSSで要素を斜めにする
- 1.1 transformを使う
- 1.2 clip-pathを使う
2 実際の使用例
- 2.1 コンテンツの背景を斜めにする
- 2.2 グローバルナビのリンクを斜めにする
3 まとめ

CSSで要素を斜めにする

CSSで要素を斜めにする場合、transform:skew()を使用する方法とclip-path:polygon()を使用する方法の2パターンあります。

transformを使う

transform:skew()を使用する方法をご紹介します。

transform:skew()にはX軸だけを傾けるtransform:skewX()、Y軸だけを傾けるtransform:skewY()、X軸、Y軸共に傾けるtransform:skew()の3種類があります。

そして、傾き具合は「deg」で指定します。

X軸を斜めにする

それでは、まずはX軸だけを斜めにする場合です。
X軸だけを斜めにする場合は、transform:skewX()を使用します。

transform: skewX(15deg);

X軸だけを斜めにする場合について、実際に指定してみましょう。

用意するHTMLはこちら。

<div class="skewX"><span>【CSS】斜めの背景やリンクを作成する方法</span></div>

このHTMLに指定するCSSはこちら。

.skewX {
    width: 50%;
    height: 50vh;
    background: #dc5a45;
    transform: skewX(15deg);
}
.skewX span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skewX(-15deg);
}

そして実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ポイントはtransform:skewX()で斜めにした要素の中で、斜めにした分だけtransform:skewX()で戻してあげることです。
transform:skewX(15deg)と指定した場合、その中の要素でtransform:skewX(-15deg)と斜めにした分だけ戻します。

Y軸を斜めにする

続いてY軸だけを斜めにする場合です。
Y軸だけを斜めにする場合は、transform:skewY()を使用します。傾き度合は「deg」で指定します。

transform: skewY(15deg);

Y軸だけを斜めにする場合も実際に指定してみましょう。

用意するHTMLはこちら。

<div class="skewY"><span>【CSS】斜めの背景やリンクを作成する方法</span></div>

このHTMLに指定するCSSはこちら。

.skewY {
    width: 50%;
    height: 50vh;
    background: #e8c72e;
    transform: skewY(15deg);
}
.skewY span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skewY(-15deg);
}

そして実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

Y軸の場合もtransform:skewY()で斜めにした要素の中で、斜めにした分だけtransform:skewY()で戻してあげることです。
transform:skewY(15deg)と指定した場合、その中の要素でtransform:skewY(-15deg)と斜めにした分だけ戻します。

X軸、Y軸共に斜めにする

最後にX軸、Y軸共に斜めにする場合です。
X軸、Y軸共に斜めにする場合はtransform:skew(X軸,Y軸)を使い、引数を2つ指定します。第1引数がX軸、第2引数がY軸です。

transform: skew(15deg,15deg);

X軸、Y軸共にも斜めにする場合も、実際に指定してみましょう。

用意するHTMLはこちら。

<div class="skewXY"><span>【CSS】斜めの背景やリンクを作成する方法</span></div>

このHTMLに指定するCSSはこちら。

.skewXY {
    width: 50%;
    height: 50vh;
    background: #3d8582;
    transform: skew(15deg,15deg);
}
.skewXY span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: skew(-15deg,-15deg);
}

そして実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

この場合も同様で、transform:skew()で斜めにした要素の中で、斜めにした分だけtransform:skew()で戻してあげることです。
transform:skew(15deg,15deg)と指定した場合、その中の要素でtransform:skewY(-15deg,-15deg)と斜めにした分だけ戻します。

clip-pathを使う

続いてclip-path:polygon()を使う方法です。

clip-path:polygon()はX軸やY軸という考え方はなく、要素の座標を指定しトリミングすることで斜めの要素を作り出します。

.clippath {
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}

それでは、clip-path:polygon()を使った要素を斜めにする方法も実際に見てみましょう。

用意するHTMLはこちら。

<div class="clippath">【CSS】斜めの背景やリンクを作成する方法</div>

このHTMLに指定するCSSはこちら。

.clippath {
    width: 50%;
    height: 50vh;
    padding: 5%;
    background: #dc5a45;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}

そして実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

clip-pathは座標の数を工夫することで斜め以外の形やレイアウトも実現することが出来ます。
詳しくはこちらの記事でご紹介しています。

【コピペ】CSSのclip-pathで色んな図形に切り抜く／サンプルコード

実際の使用例

ここからは実際の制作で出現しそうな斜めのレイアウトやコンテンツを想定したHTMLとCSSの指定方法のご紹介です。

コンテンツの背景を斜めにする

コンテンツの背景を斜めにする方法です。

デザイナーがPhotoShopやIllustratorで斜めのデザインを作成するのは比較的簡単ですが、それをHTMLで再現しようと思うと少し工夫が必要ですね。

用意するHTMLはこちら。

<section class="section" id="message">
    <h2 class="title">代表挨拶</h2>
</section>
<section class="section" id="company">
    <h2 class="title">会社概要</h2>
</section>
<section class="section" id="access">
    <h2 class="title">アクセス</h2>
</section>

このHTMLに指定するCSSはこちら。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.section {
    width: 100%;
    height: 80vh;
    padding: 2em;
    position: relative;
}
.section::before,
.section::after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    z-index: -1;
}
.section::before {
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
}
.section::after {
    height: 50%;
    left: 0;
    right: 0;
}
.section .title {
    text-align: center;
    color: #fff;
    letter-spacing: .1em;
}
.section .title::after {
    content: "";
    display: block;
    width: 2em;
    height: 2px;
    background: #fff;
    margin: .5em auto 0;
}
#message {
    z-index: 2;
}
#message::before,
#message::after{
    background: #dc5a45
}
#message::before {
    transform: skewY(5deg);
}
#message::after {
    top: 0;
}
#company {
    z-index: 1;
}
#company::before,
#company::after {
    background: #e8c72e;
}
#company::before {
    transform: skewY(5deg);
}
#company::after {
    bottom: -20%;
}
#access {
    z-index: 2;
}
#access::before,
#access::after {
    background: #3d8582;
}
#access::before {
    transform: skewY(-5deg);
}
#access::after {
    bottom: -20%
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

実際のデザインに合わせて数値などを変更してご使用ください。

グローバルナビのリンクを斜めにする

続いて、斜めにデザインされたグローバルナビを作り、aタグのリンク部分も斜めにする方法です。

こちらも初見コーダー泣かせのレイアウトですね（涙）

用意するHTMLはこちら。

<nav class="nav">
    <ul class="nav__inner">
        <li class="nav__item"><a href="#message"><span>代表挨拶</span></a></li>
        <li class="nav__item"><a href="#company"><span>会社概要</span></a></li>
        <li class="nav__item"><a href="#access"><span>アクセス</span></a></li>
    </ul>
</nav>

このHTMLに指定するCSSはこちら。

* {
    margin: 0;
    padding: 0;
}
.nav {
    overflow: hidden;
    background: linear-gradient(90deg, #dc5a45 0%, #dc5a45 50%, #3d8582 50%, #3d8582 100%);
}
.nav__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav__item {
    width: calc(100% / 3);
    list-style-type: none;
    position: relative;
    z-index: 2;
}
.nav__item::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transform: skewX(-15deg);
}
.nav__item a {
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    transition: all .3s ease;
    transform: skewX(-15deg);
}
.nav__item.-message a {
    background: #dc5a45;
}
.nav__item.-company a {
    background: #e8c72e;
}
.nav__item.-access a {
    background: #3d8582;
}
.nav__item a:hover {
    opacity: .6;
}
.nav__item a span {
    display: block;
    transform: skewX(15deg);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

こちらの場合も、実際のデザインに合わせて数値などを変更してご使用ください。