Previous words
CSS draws on the concept of SVG cropping, set the Clip-path style, this article will detail the path clipping Clip-path
Overview
The Clip-path property prevents some elements from being displayed through defined clipping areas, only through the display of special areas. Clipping zones are paths that are defined by URLs instead of inline or external SVG, or methods that define alignments
Note IE browser is not supported, and the lower version WebKit kernel browser needs to add-webkit-prefix
"Clip-path"
Value: <clip-source> | [<basic-shape> | | <geometry-box>] | None
<clip-source>: url ()
<basic-shape>: Inset () | Circle () | Ellipse () | Polygon ()
<geometry-box>: Fill-box | Stroke-box | View-box | Margin-box | Border-box | Padding-box | Content-box
Initial value: None
Applies to: all elements
Inheritance: None
Simple graphics cropping
"Round cropping"
<style>. Outer{width:100px;Height:100px;background:Orange;Clip-path:Circle (50% at 50% 50%)} </style><Divclass= "outer"></Div>
"Ellipse clipping"
<style>. Outer{width:100px;Height:100px;background:Orange;Clip-path:Ellipse (25% 40% at 50% 50%);} </style><Divclass= "outer"></Div>
"Rectangle cropping"
<style>. Outer{width:100px;Height:100px;background:Orange;Clip-path:inset (5% 20% 15% 10%);} </style><Divclass= "outer"></Div>
Polygon Clipping
Triangle
Clip-path:polygon (50% 0%, 0% 100%, 100% 100%);
Diamond
Clip-path:polygon (50% 0%, 100% 50%, 50% 100%, 0% 50%);
Trapezoidal
Clip-path:polygon (20% 0%, 80% 0%, 100% 100%, 0% 100%);
Parallelogram
Clip-path:polygon (25% 0%, 100% 0%, 75% 100%, 0% 100%);
Pentagon
Clip-path:polygon (50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
Hexagon
Clip-path:polygon (50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
"Seven-edged shape"
Clip-path:polygon (50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
"Eight-edged shape"
Clip-path:polygon (30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
Special graphics cropping
Bevel
Clip-path:polygon (20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
"Notch"
Clip-path:polygon (0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
"Left Arrow"
Clip-path:polygon (40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
"Right Arrow"
Clip-path:polygon (0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
Stars
Clip-path:polygon (50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
Cross
Clip-path:polygon (10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
"Fork Number"
Clip-path:polygon (20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
"dialog Box"
Clip-path:polygon (0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
Deformation
The Clip-path property supports transition, but only if the same clipping function, and the same number of arguments
Here is a chamfer effect to the square of the deformation process
. outer{ width:100px; height:100px; Background:orange; Clip-path:polygon (20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); Transition:.5s Clip-path;} . outer:hover{ clip-path:polygon (0 0,0 0,100% 0,100% 0,100% 100%,100% 100%,0 100%,0 100%);} < class= "outer"></div>
Start morphing when mouse moves
Extended
Finally, introduce a tool and a website
Tools
Clippy is an online path clipping tool that allows you to crop out arbitrary graphics using the Clip-path property.
Site
Species-in-pieces.com is a world-renowned website for the protection of endangered animals. , the main use clip-path
polygon
achieved 30 animals and 30 kinds of transformation
Path clipping style in CSS Clip-path