- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - clip-path Property
CSS clip-path property defines a clipping regions for elements, which defines the visible area of the element. It allows you to create complex shapes and paths to determine how an element should be clipped or displayed. It is mostly used with images to crop or create interesting shapes.
Applies to
All elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements.
Syntax
Let's check all the possible available syntax to set values to property clip-path.
Keyword Values
clip-path: none;
<clip-source> Value
clip-path: url(resources.svg#c1);
<geometry-box> Values
clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box;
<basic-shape> Values
clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: ellipse(50px 60px at 0 10% 20%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path( "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" );
CSS clip-path - <clip-source> Value
You can use SVG path commands to create complex clipping paths. This provides great flexibility in defining shapes. The following example demonstrates this −
<html> <head> <style> #clip-img { clip-path: url("#clip-img") } </style> </head> <body> <h4>Without clipping</h4> <img height="200" width="200" src="images/tree.jpg"> <svg height="0" width="0"> <clipPath id="clip-img"> <rect y="80" x="130" width="80" height="80" /> <rect x="60" y="130" width="80" height="80" /> <rect x="130" y="200" width="80" height="80" /> <rect x="200" y="130" width="80" height="80" /> </clipPath> </svg> <h4>With clipping</h4> <img id="clip-img" height="200" width="200" src="images/tree.jpg"> </body> </html>
CSS clip-path - <geometry-box> Value
If clip-path is set with <geometry-box> value in combination with a <basic-shape>, it defines the reference box for the basic shape. The following example demonstrates how to use clip-path: <geometry-box> property −
This value may not be supported by all browsers.
<html> <head> <style> html, body { height: 100%; box-sizing: border-box; background: #eee; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .cell { margin: 0.5em; padding: 0.5em; background-color: #fff; overflow: hidden; text-align: center; flex: 1; } .note { background: grey; padding: 1em; margin: 0.5em 0.5em 0; font: 0.8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { display: inline-block; border: 1px dotted rgb(138, 26, 26); position: relative; } .container::before { content: "margin"; position: absolute; top: 2px; left: 2px; font: italic 0.6em sans-serif; } .cell span { display: block; margin-bottom: 0.5em; } p { font-family: sans-serif; background: #000; color: rgb(110, 109, 195); margin: 2em; padding: 3em 1em; border: 1em solid rgb(143, 19, 225); width: 6em; } .box1 { clip-path: circle(25%); } .box3{ clip-path: fill-box circle(25% at 25% 25%); } .box4 { clip-path: stroke-box circle(25% at 25% 25%); } .box5 { clip-path: view-box circle(25% at 25% 25%); } .box6 { clip-path: margin-box circle(25% at 25% 25%); } .box7 { clip-path: border-box circle(25% at 25% 25%); } .box8 { clip-path: padding-box circle(25% at 25% 25%); } .box9 { clip-path: content-box circle(25% at 25% 25%); } </style> </head> <body> <div class="note">clip-path: circle(25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape1">Happy <br /><em>clipping</em></p> </div> </div> </div> <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="box3">Happy<br /><em>clipping</em></p> </div> </div> </div> <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="box4">Happy<br /><em>clipping</em></p> </div> </div> </div> <div class="note">clip-path: view-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="box5">Happy<br /><em>clipping</em></p> </div> </div> </div> <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="box6">Happy<br /><em>clipping</em></p> </div> </div> </div> <div class="note">clip-path: border-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="box7">Happy<br /><em>clipping</em></p> </div> </div> </div> <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="box8">Happy<br /><em>clipping</em></p> </div> </div> </div> <div class="note">clip-path: content-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="box9">Happy<br /><em>clipping</em></p> </div> </div> </div> </body> </html>
CSS clip-path - Basic Shapes
The following example demonstrates how to use the clip-path: <basic-shape> property to define a clipping region for an element using a basic shape, such as a circle, ellipse, or polygon −
<html> <head> <style> .image-container { display: flex; } .clip-inset { width: 100px; height: 100px; margin: 10px; clip-path: inset(10% 10% 10% 10% round 10% 10% 10% 10%); } .clip-circle { width: 100px; height: 100px; margin: 10px; clip-path: circle(40%); } .clip-ellipse { width: 100px; height: 100px; margin: 10px; clip-path: ellipse(100px 50px at 100px 100px); } .clip-ploygon { width: 100px; height: 100px; margin: 10px; clip-path: polygon(0 50%, 100% 50%, 50% 100%, 50% 0); } .clip-path { width: 100px; height: 100px; margin: 10px; clip-path: path('M 100 100 L 0, 50 L 150,50 z'); } </style> </head> <body> <div class="image-container"> <h3>Inset</h3> <img src="images/tree.jpg" class="clip-inset"> </div> <div class="image-container"> <h3>Circle</h3> <img src="images/tree.jpg" class="clip-circle"> </div> <div class="image-container"> <h3>Ellipse</h3> <img src="images/tree.jpg" class="clip-ellipse"> </div> <div class="image-container"> <h3>Ploygon</h3> <img src="images/tree.jpg" class="clip-ploygon"> </div> <div class="image-container"> <h3>Path</h3> <img src="images/tree.jpg" class="clip-path"> </div> </body> </html>
To Continue Learning Please Login
Login with Google