記事は上記記事を意訳したものです。
※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。
CSS clip-pathプロパティを使用すると、要素のコンテンツを基本的な形状やSVGパスにクリッピングすることで、興味深い形状や効果を作成できます。clip-pathを使用することで、要素を円形、多角形、曲線的な形状などに変形することができます。
この投稿では、ボタン、画像、テキスト、レイアウトに独特なデザインを追加するための16個のCSS clip-pathの例を紹介します。画像から円形や多角形の形状を切り抜きたい場合や、要素を unusual な方法で曲げたり湾曲させたりしたい場合でも、これらのクリップパスのスニペットは、HTML、CSS、JavaScriptを使用して実現する方法を示しています。
- CSS Polygons With Clip Path Circle
- CSS Clip Path Border
- On Hover Image Clip Path
- CSS Card On Hover Background Clip Effect
- Popping Effect With Clip Path
- CSS Reverse Clip Path With Blend Modes
- Clip-Path Revealing Slider
- Auto Hexagonal CSS Grid Layout With Polygons Shape
- Hamburger Clip-Path
- CSS Background Clip Path On Hover
- Background Image Clip-Path
- Background Clip Path
- Toggle Clip Path
- Different CSS Clip Path EXAMPLES
- Pure CSS Clip Path Button
- CSS Text Clip Path
CSS Polygons With Clip Path Circle
| Author | Darsain | | Source Code | Demo/Source Code | | Language | HTML & CSS | | Responsive | Yes |
CSS Clip Path Border
| Author | Shan-Mi | | Source Code | Demo/Source Code | | Language | HTML & CSS | | Responsive | Yes |
On Hover Image Clip Path
| Author | Ahmad Emran | | Source Code | Demo/Source Code | | Language | HTML & CSS | | Responsive | Yes |
CSS Card On Hover Background Clip Effect
| Author | Atul Gairola | | Source Code | Demo/Source Code | | Language | HTML & CSS | | Responsive | Yes |
Popping Effect With Clip Path
| Author | Mikael Ainalem | | Source Code | Demo/Source Code | | Language | HTML & CSS | | Responsive | Yes |
CSS Reverse Clip Path With Blend Modes
| Author | Zach Saucier | | Source Code | Demo/Source Code | | Language | HTML & CSS | | Responsive | Yes |
Clip-Path Revealing Slider
| Author | Nikolay Talanov | | Source Code | Demo/Source Code | | Language | HTML, CSS & Js | | Responsive | Yes |
Auto Hexagonal CSS Grid Layout With Polygons Shape
| Author | Kseso | | Source Code | Demo/Source Code | | Language | HTML, CSS & Js | | Responsive | Yes |
Hamburger Clip-Path
| Author | Mikael Ainalem | | Source Code | Demo/Source Code | | Language | HTML & CSS | | Responsive | Yes |
CSS Background Clip Path On Hover
| Author | Wes Couch | | Source Code | Demo/Source Code | | Language | HTML, CSS & Js | | Responsive | Yes |
Background Image Clip-Path
| Author | Elena | | Source Code | Demo/Source Code | | Language | HTML & CSS | | Responsive | Yes |
Background Clip Path
| Author | Justin Rent | | Source Code | Demo/Source Code | | Language | HTML & CSS | | Responsive | Yes |
Toggle Clip Path
| Author | Jhey | | Source Code | Demo/Source Code | | Language | HTML, CSS & Js | | Responsive | Yes |
Different CSS Clip Path EXAMPLES
| Author | Chris Coyier | | Source Code | Demo/Source Code | | Language | HTML & CSS | | Responsive | Yes |
Pure CSS Clip Path Button
| Author | Jhey | | Source Code | Demo/Source Code | | Language | HTML & CSS | | Responsive | Yes |
CSS Text Clip Path
| Author | Yoksel | | Source Code | Demo/Source Code | | Language | HTML & CSS | | Responsive | Yes |
