BLOGスタッフブログ

clip-pathを使ってみよう

clip-pathとは

要素のどの部分を表示するかを設定するクリッピング領域を作るCSSプロパティです。

クリッピング領域を作ると領域の外側は非表示になり、内側は表示されます

basic-shapeと呼ばれる5つのシェイプを作ることが出来ます。

元画像
clip-path: inset(10px 20px round 10px 30px 0 80px);
値: inset(縦横の余白 roundで角丸指定);
clip-path: circle(30% at 50% 50%);
値: circle(半径 at x座標 y座標);
clip-path: ellipse(80px 50px at center);
値: ellipse(横幅・高さ at位置);
clip-path: polygon(0 100%,50% 0,100% 100%);
値: polygon(x軸の座標 y軸の座標, x軸の座標 y軸の座標,・・・);
clip-path: path(‘M111.954~省略’);
値: path(SVGのd属性);

三角形をclip-pathで作る

今までborderで作っていたボタンの三角形矢印

【CSS】
width: 0;
height: 0;
border-style: solid;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid #ffffff;
border-right: 0;

clip-path: polygonで作たボタンの三角形矢印

【CSS】
background: #ffffff;
height: 12px;
width: 14px;
clip-path: polygon(0 0, 50% 50%, 0 100%);

clip-pathを使用すると少ない記述量で三角形が作れます。

またborderは要素の境界の幅を指定するプロパティのためborderで三角形を作ることに違和感が感じられます。clip-pathのブラウザサポートも基本的に対応されてきたので、borderで三角形を作る必要がなくなるかもしれません。

インソースマーケティングデザインが書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します