【CSS】三角形や斜めの背景デザインをCSSのclip-pathプロパティで手軽に再現する
三角形や斜めの背景デザインなどの多角形をCSSで再現する場合は
borderや疑似要素を使った方法が一般的で、こちらの記事でもご紹介しております。
時代は流れて、最近ではIE11のサポート終了に伴いモダンブラウザを対象とした
CSSのプロパティを採用することができるようになってきました。
今回は要素を任意の形で手軽に切り抜けるclip-pathを使って、
三角形および斜めの背景デザインを手軽に再現する方法をご紹介します。
目次
実装した結果
三角形
枠線付きの三角形
背景要素を斜めに切り抜いたデザイン
実際のコードと解説
HTMLおよびCSSそれぞれのコードは以下のとおりです。
HTML
サンプルでは単一の要素に対してCSSを設定していますので、
それぞれひとつのdivのみで構成しています。
<div class="triangle"></div>
<div class="border-triangle"></div>
<div class="slanted"></div>CSS
Sassの環境がない方も利用できるようにCSSでご紹介します。
/* 通常の三角形
-----------------------------------------*/
.triangle {
width: 200px;// 三角形の横幅
height: 200px;// 三角形の高さ
background: #fff;// 三角形の色
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);// ベンダープレフィックス
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);// 切り抜く形（三角形）
}
/* 枠線付きの三角形
-----------------------------------------*/
.border-triangle {
width: 200px;// 枠線含めた三角形の横幅
height: 200px;//枠線含めた三角形の高さ
position: relative;
background: #fff;// 枠線の色
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);// 切り抜く形（三角形）
}
.border-triangle:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
bottom: -3.8933333333px;// 枠線サイズふまえた縮小率に対する位置の調整
background: #ff0000;
transform:scale(0.9473777778);// 枠線サイズふまえた縮小率
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);// 切り抜く形（三角形）
}
/* 背景を斜めに切り抜いたデザイン
-----------------------------------------*/
.slanted {
height: 200px;
background: #ccc;
-webkit-clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);
clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);// 切り抜く形（平行四辺形）
}clip-path: polygonの考え方
今回切り抜きに利用したclip-path:polygon()については、
x軸とy軸のセットでポイントの位置を指定する考え方になっています。
.triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
// polygon( ポイント1のx軸 y軸, ポイント2のx軸 y軸, ポイント3のx軸 y軸 )
// ポイントのスタート地点(0, 0)は左上
// x軸の値を増やすと右に移動し、y軸の値を増やすと下に移動する
// 「三」角形なのでx軸とy軸を指定するポイントは3つ
}この仕様をふまえて三角形の向きを変えたいくつかのパターンを以下にご紹介します。
.triangle-top {
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.triangle-top-right {
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.triangle-right {
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.triangle-bottom-right {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.triangle-bottom {
clip-path: polygon(100% 0, 50% 100%, 0 0);
}
.triangle-bottom-left {
clip-path: polygon(100% 100%, 0 100%, 0 0);
}
.triangle-left {
clip-path: polygon(100% 100%, 0 50%, 100% 0);
}
.triangle-top-left {
clip-path: polygon(0 100%, 0 0, 100% 0);
}今回は三角形を例にご紹介しましたが、四角形であればポイントを4つ指定、
五角形であればポイントを5つ指定という考え方でCSSのみを使った自由な切り抜きが可能です。
枠線（border）は指定できない
切り抜いた要素に対してその形に沿った枠線（border）を指定することはできず、
その場合はひとまわり小さい要素を重ねるなどの工夫が必要となります。
サンプルで示した枠線付きの三角形はafter要素でひとまわり小さい三角形の中身を作成し、
重ね合わせることで枠線を再現しています。
計算式が少し複雑で希望するborder-widthに応じた縮小率を指定するのは効率が悪いため、
Sassを導入できる方は以下のようなmixinを用意しておくことをオススメいたします。
/* 枠線付き三角形を作るためのmixin
-----------------------------------------*/
@mixin borderTriangle($bgColor: #fff, $borderColor: #000, $w: 200, $h: 200, $borderSize: 12) {
$scale: (($w - ($borderSize * 2)) * ($h - ($borderSize * 2)) / 2) / ($w * $h / 2);// 縮小率
$bottom: ($h - ($h * $scale)) / 2 - $borderSize;// 縮小率をもとにした位置の調整
& {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
width: #{$w}px;
height: #{$h}px;
background: $borderColor;
position: relative;
}
&:after {
content: "";
display: block;
position: absolute;
bottom: -#{$bottom}px;
width: 100%;
height: 100%;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background: $bgColor;
transform:scale($scale);
}
}
/* 実際に利用する
-----------------------------------------*/
.border-triangle {
@include borderTriangle($bgColor: #ff0000, $borderColor: #fff, $w: 200, $h: 200, $borderSize: 4);
// 背景色、枠線色、横幅、高さ、枠線のサイズ
}最後に
フロントエンドでWEBサイトの制作をしているとクロスブラウザの観点で、
プロジェクト毎にどのCSSプロパティを採用できるかという選定が変わってきます。
モダンブラウザに向けた比較的新しいCSSプロパティは様々なデザインを
手軽に再現できる便利なものも多いです。
CSSで一般的な図形を再現できると色やサイズの調整も手軽に行えるため、
今回ご紹介したclip-pathプロパティが採用できると制作効率は上がると思います。
是非参考になれば幸いです。
