{"id":3535,"date":"2021-07-31T09:08:10","date_gmt":"2021-07-31T09:08:10","guid":{"rendered":"https:\/\/infyblog.zluck.in\/?p=3535"},"modified":"2024-08-20T12:19:15","modified_gmt":"2024-08-20T12:19:15","slug":"what-is-a-clip-path-and-how-to-use-css-clip-path-elements","status":"publish","type":"post","link":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/","title":{"rendered":"What is a clip-path? And how to use CSS clip-path elements?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3535\" class=\"elementor elementor-3535\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-653729d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"653729d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-639ed32\" data-id=\"639ed32\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\n\t\t<div class=\"elementor-element elementor-element-634cfbe elementor-widget elementor-widget-text-editor\" data-id=\"634cfbe\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>In this blog, we will learn how to use clip-path and also cover inset(), polygon(), circle(), and ellipse() method .<\/p><h2>What is CSS Clip-path?<\/h2><p>Clip-path is a CSS property that creates a clipping field that sets which part of a component should be shown and which other parts are hidden. The inside of the clipped area is shown, while the outside is hidden.<\/p><p>CSS Property clip-path creates shapes by clipping an element. It clips some regions of an element to create new shapes. The most used method for clip-path is polygon(), circle(), and ellipse().<\/p><h2>CSS clip-path() accepted values<\/h2><p>These shapes can be created using basic shape functions. The basic shape functions are listed below:-<\/p><ul><li>inset()<\/li><li>polygon()<\/li><li>circle()<\/li><li>ellipse()<\/li><\/ul><h2>inset()<\/h2><p>The inset () function allows you to clip a component from around the coordinate system. The result is a visible rectangle. you can assign values to the margin or padding and border-radius property. but two values are limited in rounded corners. The first value is assigned to the top left corner and the bottom right corner and the second value is assigned to the top right corner and the bottom left corner.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1cf6ff1 elementor-widget elementor-widget-image\" data-id=\"1cf6ff1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"550\" height=\"348\" src=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/inset.png\" class=\"attachment-large size-large wp-image-3543\" alt=\"inset()\" srcset=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/inset.png 550w, https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/inset-300x190.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-392247f elementor-widget elementor-widget-text-editor\" data-id=\"392247f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>polygon()<\/h2><p>To design or clip the rectangular parts of the viewport, we use the polygon () method. Polygon is the most commonly used method in clip-path. We can construct any shape using the polygon method.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b47a215 elementor-widget elementor-widget-image\" data-id=\"b47a215\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"628\" height=\"410\" src=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/polygon-example.png\" class=\"attachment-large size-large wp-image-3547\" alt=\"polygon()\" srcset=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/polygon-example.png 628w, https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/polygon-example-300x196.png 300w\" sizes=\"(max-width: 628px) 100vw, 628px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9bf709 elementor-widget elementor-widget-text-editor\" data-id=\"c9bf709\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Example<\/h2>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-142c104 elementor-widget elementor-widget-image\" data-id=\"142c104\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"550\" height=\"348\" src=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/polygon.png\" class=\"attachment-large size-large wp-image-3551\" alt=\"polygon\" srcset=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/polygon.png 550w, https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/polygon-300x190.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18d1cd1 elementor-widget elementor-widget-text-editor\" data-id=\"18d1cd1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>circle()<\/h2><p>The below image is created by using the clip-path method circle(50% at 50% 50%). In the circle(val1 at var2 var3), val1 is the size of the radius of the circle, and val2 and val3 are the positions of the center. val2 represents the position of the center from the left of the viewport, val2 represents the position of the center from the top of the viewpor<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0af3976 elementor-widget elementor-widget-image\" data-id=\"0af3976\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"348\" src=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/cricle-1.png\" class=\"attachment-large size-large wp-image-3552\" alt=\"cricle\" srcset=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/cricle-1.png 550w, https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/cricle-1-300x190.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c3f77ac elementor-widget elementor-widget-text-editor\" data-id=\"c3f77ac\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>ellipse()<\/h2><p>Below image is created using clip-path method ellipse(25% 40% at 50% 50%). An ellipse(val1 val2 at val3 val4) val1 and val2 are the horizontal and vertical distance from the center. val3 and val4 is the position of center.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f1c8642 elementor-widget elementor-widget-image\" data-id=\"f1c8642\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"348\" src=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/ellipse.png\" class=\"attachment-large size-large wp-image-3556\" alt=\"ellipse\" srcset=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/ellipse.png 550w, https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/ellipse-300x190.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-661c80a elementor-widget elementor-widget-text-editor\" data-id=\"661c80a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Resources<\/h2><p>I recommend you visit this <a href=\"https:\/\/bennettfeely.com\/clippy\/\">link<\/a> to play with the clip-path CSS property. You will see different types of shapes from this link. It&#8217;s an imaginative place. You can customize your shape.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>CSS Property clip-path creates shapes by clipping an element. It clips some regions of an element to create new&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3537,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"two_page_speed":[],"footnotes":""},"categories":[73],"tags":[74,19],"class_list":["post-3535","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-learning"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is a clip-path? And how to use CSS clip-path elements?<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is a clip-path? And how to use CSS clip-path elements?\" \/>\n<meta property=\"og:description\" content=\"CSS Property clip-path creates shapes by clipping an element. It clips some regions of an element to create new...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | InfyOm Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/infyom\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-31T09:08:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-20T12:19:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements.png\" \/>\n\t<meta property=\"og:image:width\" content=\"772\" \/>\n\t<meta property=\"og:image:height\" content=\"484\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InfyOm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InfyOm\" \/>\n<meta name=\"twitter:site\" content=\"@InfyOm\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InfyOm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/\"},\"author\":{\"name\":\"InfyOm\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754\"},\"headline\":\"What is a clip-path? And how to use CSS clip-path elements?\",\"datePublished\":\"2021-07-31T09:08:10+00:00\",\"dateModified\":\"2024-08-20T12:19:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/\"},\"wordCount\":373,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/infyom.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements.png\",\"keywords\":[\"CSS\",\"Learning\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/\",\"url\":\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/\",\"name\":\"What is a clip-path? And how to use CSS clip-path elements?\",\"isPartOf\":{\"@id\":\"https:\/\/infyom.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements.png\",\"datePublished\":\"2021-07-31T09:08:10+00:00\",\"dateModified\":\"2024-08-20T12:19:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#primaryimage\",\"url\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements.png\",\"contentUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements.png\",\"width\":772,\"height\":484,\"caption\":\"What is a clip-path? And how to use CSS clip-path elements?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/infyom.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is a clip-path? And how to use CSS clip-path elements?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/infyom.com\/blog\/#website\",\"url\":\"https:\/\/infyom.com\/blog\/\",\"name\":\"Blog | InfyOm Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/infyom.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/infyom.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/infyom.com\/blog\/#organization\",\"name\":\"InfyOm Technologies\",\"url\":\"https:\/\/infyom.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\",\"contentUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\",\"width\":88,\"height\":41,\"caption\":\"InfyOm Technologies\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/infyom\",\"https:\/\/x.com\/InfyOm\",\"https:\/\/www.instagram.com\/infyomtechnologies\/\",\"https:\/\/in.linkedin.com\/company\/infyom-technologies\",\"https:\/\/github.com\/infyomlabs\",\"https:\/\/x.com\/infyom\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754\",\"name\":\"InfyOm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g\",\"caption\":\"InfyOm\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is a clip-path? And how to use CSS clip-path elements?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/","og_locale":"en_US","og_type":"article","og_title":"What is a clip-path? And how to use CSS clip-path elements?","og_description":"CSS Property clip-path creates shapes by clipping an element. It clips some regions of an element to create new...","og_url":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/","og_site_name":"Blog | InfyOm Technologies","article_publisher":"https:\/\/www.facebook.com\/infyom","article_published_time":"2021-07-31T09:08:10+00:00","article_modified_time":"2024-08-20T12:19:15+00:00","og_image":[{"width":772,"height":484,"url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements.png","type":"image\/png"}],"author":"InfyOm","twitter_card":"summary_large_image","twitter_creator":"@InfyOm","twitter_site":"@InfyOm","twitter_misc":{"Written by":"InfyOm","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#article","isPartOf":{"@id":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/"},"author":{"name":"InfyOm","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754"},"headline":"What is a clip-path? And how to use CSS clip-path elements?","datePublished":"2021-07-31T09:08:10+00:00","dateModified":"2024-08-20T12:19:15+00:00","mainEntityOfPage":{"@id":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/"},"wordCount":373,"commentCount":0,"publisher":{"@id":"https:\/\/infyom.com\/blog\/#organization"},"image":{"@id":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements.png","keywords":["CSS","Learning"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/","url":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/","name":"What is a clip-path? And how to use CSS clip-path elements?","isPartOf":{"@id":"https:\/\/infyom.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#primaryimage"},"image":{"@id":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements.png","datePublished":"2021-07-31T09:08:10+00:00","dateModified":"2024-08-20T12:19:15+00:00","breadcrumb":{"@id":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#primaryimage","url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements.png","contentUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements.png","width":772,"height":484,"caption":"What is a clip-path? And how to use CSS clip-path elements?"},{"@type":"BreadcrumbList","@id":"https:\/\/infyom.com\/blog\/what-is-a-clip-path-and-how-to-use-css-clip-path-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/infyom.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is a clip-path? And how to use CSS clip-path elements?"}]},{"@type":"WebSite","@id":"https:\/\/infyom.com\/blog\/#website","url":"https:\/\/infyom.com\/blog\/","name":"Blog | InfyOm Technologies","description":"","publisher":{"@id":"https:\/\/infyom.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/infyom.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/infyom.com\/blog\/#organization","name":"InfyOm Technologies","url":"https:\/\/infyom.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","contentUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","width":88,"height":41,"caption":"InfyOm Technologies"},"image":{"@id":"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/infyom","https:\/\/x.com\/InfyOm","https:\/\/www.instagram.com\/infyomtechnologies\/","https:\/\/in.linkedin.com\/company\/infyom-technologies","https:\/\/github.com\/infyomlabs","https:\/\/x.com\/infyom"]},{"@type":"Person","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754","name":"InfyOm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g","caption":"InfyOm"}}]}},"_links":{"self":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/3535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/comments?post=3535"}],"version-history":[{"count":26,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/3535\/revisions"}],"predecessor-version":[{"id":6216,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/3535\/revisions\/6216"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/media\/3537"}],"wp:attachment":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/media?parent=3535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/categories?post=3535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/tags?post=3535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}