CSSで斜めのエッジを作成する方法

この記事では、Webページ上で（水平方向に）角度のあるエッジ効果を作成する方法について説明します。基本的には、このようになります。

わずかに角度のある端を持つことは、私たちのWebレイアウトをそれほど堅くなくて鈍いように見せるでしょう。このトリックをするために、私達は使用します 疑似要素 ：：前 そして ::後 そして CSS3変換.

擬似要素を使う

このテクニックは擬似要素を使います ：：前 そして ::後 要素のエッジに角度を付けます。この例では、下端を調整します.

 .ブロック高さ：400ピクセル;幅：100％。位置：相対;背景：線形勾配（右へ、ｒｇｂａ（２４１，２３１，１０３，１）０％、ｒｇｂａ（２５４，１８２，６９，１）１００％）。 block :: after content： "; width：100％; height：100％; position：absolute; background：継承; z-index：-1; bottom：0; transform-origin：left bottom; transform：skewY （3度）; 

要約しましょう.

の 変換元 変換したい要素の座標を指定します。上記の例では、 左下 これはブロックの左下に開始座標を置きます.

の 変換：skewY（3度）。 になります ::後 ブロックスキューまたは3度の角度。開始座標を左下に指定したので、ブロックの右下は3度上がります。交換すると 変換元 に 右下 左下隅は3度上がります.

あなたは結果を見るために無地の背景やグラデーションを追加することができます.

Sass Mixinでより簡単に

これを簡単にするために、スタイルルールの複雑さに対処することから生じる頭痛を除いて、斜めのエッジを追加するSassミックスインを作成しました。次のミックスインを使用すると、斜めにする側（左上、右上、左下または右下）をすばやく指定できます。.

 @ミキシングangle-edge（$ pos-top：無効、$ angle-top：無効、$ pos-btm：無効、$ angle-btm：無効）幅：100％;位置：相対;背景：線形勾配（右へ、ｒｇｂａ（２４１，２３１，１０３，１）０％、ｒｇｂａ（２５４，１８２，６９，１）１００％）。 ＆:: before、＆:: after content： "; width：100％; height：100％; position：absolute; background：継承; z-index：-1; transition：すべてを楽に.5s; @if $ pos-top ＆:: before @if $ pos-top == 'topleft' top：0;変換元：右上;変換：skewY（$ angle-top）; @if $ pos-top = = 'topright' top：0;変換元：左上;変換：skewY（ -  $ angle-top）; @if $ pos-btm ＆:: after @if $ pos-btm == 'bottomleft' bottom：0;変換元：右下;変換：skewY（ -  $ angle-btm）; @if $ pos-btm == 'bottomright' 下：0;変換元：左下; skewY（$ angle-btm）; 

ミックスインには4つの変数があります。最初の2つの変数, $ pos-top そして $アングルトップ, を指定 トップ開始座標 そしてその 度. 後者の2つの変数は、 座標 そしてその 度 のために 底 側.

4つの変数すべてを埋める場合は、要素の両側（上と下）を傾けることができます。.

Sassを使う @含める ミックスインを要素に挿入するための構文。あなたは以下の例を見ることができます：

斜めのエッジを追加するには 左上 側：

 .block @include angle-edge（topleft、3deg）;  

斜めのエッジを追加するには 右下 側：

 .block @include angle-edge（bottomright、3deg）;  

斜めのエッジを追加するには 左上 そして 右下 側：

 .block @includeアングルエッジ（トップレフト、3度、ボトムライト、3度）。  

下記はミックスインを適用したデモです。選択ボックスを変更して別のスタイルに切り替える.

それでおしまい!