最近色んなサイトで見かけることが多くなった、斜めでの区切り。 単純な平行四辺形であれば、skewを使ったりすることで解決できたりしますが、複雑になってくるとどうしてもcssが複雑化してしまいます。
そこで今回はsvgで三角形のパスを書くことで、斜めの区切りを作成してみました。
解決したい問題：なるべくシンプルに斜め区切りを再現する
こんな感じのデザインを実装するとします
(*わかりやすくするためにsvgとコンテンツの区切りを黒borderにしてます)
解決策： 三角形のsvgをmixinで管理し、クラスで個別に高さ、色を管理する。
まず、区切りのところは無視して通常の状態でページを作成します。
斜めの区切りをsvg要素で、作成します。
今回は左上がりの三角形でpathを引きます。 (0,0)から(100,0)まで線を書き、そこから(0,100)まで引くことで、左上がりの三角形が完成します。 あとは、このクラスに高さと色を埋める指定を入れてあげれば大丈夫です。
残りはそのsvgの要素に対して、スタイルを設定するだけで終わりです!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//-stylus .svg__wrapper position relative width 100vw height 100vh .svg__line position absolute left 50% width 100% transform translateX(-50%) .svg__line--yellow height 200px bottom -200px path fill rgba(241,218,54,1) |
共通で使うsvg要素にsvg__lineクラス(共通クラス)を付け、色などの指定は別途クラスの指定をしてあげると、沢山色々なパターンで作成できます。
pugなどのmixinに以下のような、右上がり、右下がり、左上がり、左下がりの4種類を作成しておけば呼び出すだけなので便利です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
mixin lineRightUp(className) svg.svg__line(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100" preserveaspectratio="none" class=className) path(d="M0,100 h100 v-100 Z") mixin lineRightBottom(className) svg.svg__line(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100" preserveaspectratio="none" class=className) path(d="M0,100 v-100 L100,100 Z") mixin lineLeftUp(className) svg.svg__line(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100" preserveaspectratio="none" class=className) path(d="M0,0 L100,0 0,100 Z") mixin lineLeftBottom(className) svg.svg__line(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100" preserveaspectratio="none" class=className) path(d="M100,0 L100,100 0,0 Z") |
こんな感じに作成しておけば後は呼び出して色を指定するクラスを足すだけで済みます!
またパスの引き方を変えれば台形など色々な図形ができるのでちょっとややこしい区切りにも対応できます。
この方法で実装に苦労しやすい斜め区切りが簡単になれば幸いです。(画像のマスクにも使えたりします。)