{"id":5662,"date":"2025-05-07T09:20:49","date_gmt":"2025-05-07T14:20:49","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5662"},"modified":"2025-06-04T06:05:29","modified_gmt":"2025-06-04T11:05:29","slug":"shape-a-new-powerful-drawing-syntax-in-css","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/shape-a-new-powerful-drawing-syntax-in-css\/","title":{"rendered":"shape(): A New Powerful Drawing Syntax in CSS"},"content":{"rendered":"\n<p>I first saw in <a href=\"https:\/\/arc.net\/l\/quote\/wnmeyzxr\">the Safari 18.4 release notes<\/a> that <code>shape()<\/code>, a new function is now supported. Then I <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/basic-shape\/shape\">saw on MDN<\/a> it&#8217;s actually already in Chrome, too! <\/p>\n\n\n\n<p>The <code>shape()<\/code> function joins friends like <code>polygon()<\/code>, <code>circle()<\/code>, <code>rect()<\/code>, <code>inset()<\/code>, and a handful of others. These functions are used as values for a handful of things in CSS, namely:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>clip-path<\/code> \u2014 Clipping away parts of elements<\/li>\n\n\n\n<li><code>offset-path<\/code> \u2014 Moving elements along a path<\/li>\n\n\n\n<li><code>shape-outside<\/code> \u2014 Applied to a <code>float<\/code>-ed element such that content flows along the path<\/li>\n<\/ul>\n\n\n\n<p class=\"learn-more\"><strong>Fair warning:<\/strong> <code>shape()<\/code> only seems to work with <code>clip-path<\/code>. I couldn&#8217;t find a ton of information on this, but <a href=\"https:\/\/developer.chrome.com\/blog\/css-shape#:~:text=At%20the%20moment%2C%20it%20only%20works%20for%20clip%2Dpath.\">the Chrome blog does state it<\/a>. It will probably work with the other properties in due time.<\/p>\n\n\n\n<p>Let&#8217;s focus on <code>clip-path<\/code> here which I might argue is the most useful anyway, as it makes an entire element into the shape described which feels like a more generally applicable thing.<\/p>\n\n\n\n<p>I got into this <a href=\"https:\/\/blog.codepen.io\/2025\/04\/21\/chris-corner-rounded-triangle-boxes-and-our-shapely-future\/\">on the CodePen blog<\/a> where I equated <code>shape()<\/code> to <code>&lt;path d=\"\"&gt;<\/code> in SVG, which is surely the intention. You can actually set the <code>d<\/code> attribute in CSS, but it only works on <code>&lt;path&gt;<\/code> elements, and the unitless values translate <em>only<\/em> to pixels, which makes it not particularly CSSy or useful. <\/p>\n\n\n\n<p>One situation I mentioned was <a href=\"https:\/\/www.trysmudford.com\/blog\/rounded-triangular-boxes-in-css\/\">Trys Mudford&#8217;s blog post<\/a> where this was the design situation at hand:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"412\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/motorway-cvt-1536x618-1.jpg?resize=1024%2C412&#038;ssl=1\" alt=\"\" class=\"wp-image-5706\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/motorway-cvt-1536x618-1.jpg?resize=1024%2C412&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/motorway-cvt-1536x618-1.jpg?resize=300%2C121&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/motorway-cvt-1536x618-1.jpg?resize=768%2C309&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/motorway-cvt-1536x618-1.jpg?w=1536&amp;ssl=1 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">Oh look, a use case.<\/figcaption><\/figure>\n\n\n\n<p>Those light yellow boxes are basically polygons with rounded corners. In a perfect world, <code>polygon()<\/code> could do this with the <code>round<\/code> keyword, as specced, but alas that doesn&#8217;t work just yet. But because <code>shape()<\/code> is essentially all-powerful, that <em>does<\/em> work now (in Chrome and Safari anyway, and this feels like a decently progressive-enhancement thing).<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tip.com\/arrow-like-box\/\">Temani Afif saw that and did the work!<\/a><\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LEENyEq\" src=\"\/\/codepen.io\/anon\/embed\/LEENyEq?height=500&amp;theme-id=47434&amp;slug-hash=LEENyEq&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LEENyEq\" title=\"CodePen Embed LEENyEq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is very awesome. This is quite the power tool for shape-making. I think we&#8217;re going to see a lot of fancy stuff come out of this.<\/p>\n\n\n\n<p>It&#8217;s true we already have a <code>path()<\/code> function, but remember, it&#8217;s <em>sooooo<\/em> limited. The values are only pixels, which are some pretty big handcuffs in a responsive world full of intrinsic content (that is, elements on the web that respond to their contents and environment). <a href=\"https:\/\/webkit.org\/blog\/16794\/the-css-shape-function\/\">Simon Fraser on the WebKit blog introduces this new feature<\/a> and calls it out:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>&#8230; using&nbsp;<code>path()<\/code>&nbsp;in&nbsp;<code>clip-path<\/code>&nbsp;can\u2019t be&nbsp;<em>responsive<\/em>; you can\u2019t write CSS rules so that the path adapts to the size of the element. This is where the new&nbsp;<code>shape()<\/code>&nbsp;function comes in.<\/p>\n<\/blockquote>\n\n\n\n<p>Coincidentally, Simon&#8217;s demo (Jen&#8217;s demo?) also shows off an arrow shape:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GgRXXMx\" src=\"\/\/codepen.io\/anon\/embed\/GgRXXMx?height=450&amp;theme-id=47434&amp;slug-hash=GgRXXMx&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GgRXXMx\" title=\"CodePen Embed GgRXXMx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That&#8217;s using multiple different drawing commands (<code>line<\/code> and <code>arc<\/code>, but there are more), keywords like <code>top<\/code> and <code>left<\/code> (excellent, but I wonder why logical properties don&#8217;t work?), and, even more deliciously, <a href=\"https:\/\/frontendmasters.com\/blog\/container-queries-and-units\/#what-are-container-query-units\">container units<\/a> (e.g. <code>cqh<\/code>). The orange border there is a good reminder that <code>clip-path<\/code>, well, <em>clips.<\/em> So it&#8217;ll lop off anything at all on this element in those areas, including content.<\/p>\n\n\n\n<p><a href=\"https:\/\/developer.chrome.com\/blog\/css-shape\">Noam Rosenthal got in on the fun<\/a> over on the Chrome for Developers blog, underscoring just how hard this stuff used to be:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><code>clip-path: shape()<\/code>&nbsp;lets you clip your element using arbitrary and responsive shapes, previously only possible using techniques like conic gradients or JavaScript-constructed SVG.<\/p>\n<\/blockquote>\n\n\n\n<p>And like all this good company, absolutely couldn&#8217;t resist peppering in other CSS goodness into a demo. His demo here uses different drawing commands than we&#8217;ve seen so far, custom properties (which are an extremely natural fit), and even animation (!!).<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OPJdjBp\" src=\"\/\/codepen.io\/anon\/embed\/OPJdjBp?height=450&amp;theme-id=47434&amp;slug-hash=OPJdjBp&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OPJdjBp\" title=\"CodePen Embed OPJdjBp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I see Temani is hard on the case with <a href=\"https:\/\/css-generators.com\/blob\/\">a blob generator using <code>shape()<\/code><\/a>, which, I believe as long as there are the &#8220;same number of points&#8221;, can be animated by changing the <code>clip-path<\/code> entirely. Like:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yyyPONb\" src=\"\/\/codepen.io\/anon\/embed\/yyyPONb?height=450&amp;theme-id=47434&amp;slug-hash=yyyPONb&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yyyPONb\" title=\"CodePen Embed yyyPONb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And obviously I love this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JoovLam\" src=\"\/\/codepen.io\/anon\/embed\/JoovLam?height=450&amp;theme-id=47434&amp;slug-hash=JoovLam&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JoovLam\" title=\"CodePen Embed JoovLam\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The Actual Shape Commands<\/h2>\n\n\n\n<p><a href=\"https:\/\/drafts.csswg.org\/css-shapes-2\/#shape-function\">The spec covers them<\/a>, but the best writeup I&#8217;ve seen is <a href=\"https:\/\/css-tricks.com\/css-shape-commands\/#:~:text=I%20figured%20a%20table%20would%20help.\">Geoff&#8217;s on CSS-Tricks<\/a>. He&#8217;s got a bit more detail so check that out, but here&#8217;s the list:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>line<\/code><\/li>\n\n\n\n<li><code>vline<\/code><\/li>\n\n\n\n<li><code>hline<\/code><\/li>\n\n\n\n<li><code>arc<\/code><\/li>\n\n\n\n<li><code>curve<\/code><\/li>\n\n\n\n<li><code>smooth<\/code><\/li>\n<\/ul>\n\n\n\n<p>Each of them have a bit of sub-syntax to themselves. Like the <code>curve<\/code> command might look like <code>curve to 50% 50% with 50% 0<\/code> which would continue drawing the shape to the exact center of the element in a curve in which the top center is a &#8220;control point&#8221; and so curves in that direction. <\/p>\n\n\n\n<p>In my experience it&#8217;s quite easy to make a small mistake in the syntax and wreck the whole thing. But hey that&#8217;s understandable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Squircles with <code>shape()<\/code><\/h2>\n\n\n\n<p>I get to have some fun too! It occurred to me that digital designs most elusive beast, <em>the squircle,<\/em> might be now achievable with reasonable normal web tech. <\/p>\n\n\n\n<p>SVG can do it, but I wouldn&#8217;t call it particularly readable code. &#8220;<a href=\"https:\/\/somonoco.com\/\">Monoco<\/a> is a tiny JavaScript library that adds squircles&#8221; (via SVG background images) and it does a pretty good job of it I&#8217;d say, but that&#8217;s more technology than I normally like to throw at something like this. Jared White by way of Simeon Griggs has a pretty nice SVG-based solution as well, leveraging SVG-as-clip-path.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JoPeJar\" src=\"\/\/codepen.io\/anon\/embed\/JoPeJar?height=450&amp;theme-id=47434&amp;slug-hash=JoPeJar&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JoPeJar\" title=\"CodePen Embed JoPeJar\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I like how relatively chill that SVG <code>path<\/code> is, but still, <code>shape()<\/code> can allow us to squish this down into just CSS which is kinda sweet.<\/p>\n\n\n\n<p>That is&#8230; if I was fully smart enough to do it. <\/p>\n\n\n\n<p>I crudely drew one in Figma so that I could label the points for writing the syntax out.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1008\" height=\"1024\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-05-at-3.49.06%E2%80%AFPM.png?resize=1008%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-5789\" style=\"width:383px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-05-at-3.49.06%E2%80%AFPM.png?resize=1008%2C1024&amp;ssl=1 1008w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-05-at-3.49.06%E2%80%AFPM.png?resize=295%2C300&amp;ssl=1 295w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-05-at-3.49.06%E2%80%AFPM.png?resize=768%2C780&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-05-at-3.49.06%E2%80%AFPM.png?w=1154&amp;ssl=1 1154w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n\n\n<p>I figured if I just did a <code>curve<\/code> to every one of those points with control points a bit the edges, it would&#8230; work? So basically like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">div<\/span> {\n  <span class=\"hljs-attribute\">clip-path<\/span>: <span class=\"hljs-built_in\">shape<\/span>(\n    from <span class=\"hljs-number\">5%<\/span> <span class=\"hljs-number\">3%<\/span>,\n    curve to <span class=\"hljs-number\">95%<\/span> <span class=\"hljs-number\">3%<\/span> with <span class=\"hljs-number\">50%<\/span> <span class=\"hljs-number\">0<\/span>,\n    curve to <span class=\"hljs-number\">97%<\/span> <span class=\"hljs-number\">5%<\/span> with <span class=\"hljs-number\">97%<\/span> <span class=\"hljs-number\">3%<\/span>,\n    curve to <span class=\"hljs-number\">97%<\/span> <span class=\"hljs-number\">95%<\/span> with <span class=\"hljs-number\">100%<\/span> <span class=\"hljs-number\">50%<\/span>,\n    curve to <span class=\"hljs-number\">95%<\/span> <span class=\"hljs-number\">97%<\/span> with <span class=\"hljs-number\">97%<\/span> <span class=\"hljs-number\">97%<\/span>,\n    curve to <span class=\"hljs-number\">5%<\/span> <span class=\"hljs-number\">97%<\/span> with <span class=\"hljs-number\">50%<\/span> <span class=\"hljs-number\">100%<\/span>,\n    curve to <span class=\"hljs-number\">3%<\/span> <span class=\"hljs-number\">95%<\/span> with <span class=\"hljs-number\">3%<\/span> <span class=\"hljs-number\">97%<\/span>,\n    curve to <span class=\"hljs-number\">3%<\/span> <span class=\"hljs-number\">5%<\/span> with <span class=\"hljs-number\">0%<\/span> <span class=\"hljs-number\">50%<\/span>,\n    curve to <span class=\"hljs-number\">5%<\/span> <span class=\"hljs-number\">3%<\/span> with <span class=\"hljs-number\">3%<\/span> <span class=\"hljs-number\">3%<\/span>,\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Which basically <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/WbbOwBP\">works<\/a>. I tried playing around with <code>arc<\/code> and <code>smooth<\/code> instead but couldn&#8217;t manage to make it any better (with my like zero geometry skills). Then instead of hard coding those percentage values, I made them in custom properties with sliders to squiggle them around a little. <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zxxzBPZ\" src=\"\/\/codepen.io\/anon\/embed\/zxxzBPZ?height=550&amp;theme-id=47434&amp;slug-hash=zxxzBPZ&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zxxzBPZ\" title=\"CodePen Embed zxxzBPZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It&#8217;s a little janky \u2014 but I trust someone make like a real quality geometrically sound version eventually. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Update #1<\/h2>\n\n\n\n<p>I heard from Peter Herbert over email:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>I found a somewhat more accurate version of the iOS squircle. Apparently the Apple squircle uses three cubic beziers in each corner. The original research that figured out the curves I found\u00a0<a href=\"https:\/\/liamrosenfeld.com\/posts\/apple_icon_quest\/\">here<\/a>,\u00a0and I used\u00a0<a href=\"https:\/\/claude.ai\/public\/artifacts\/26954731-6fcd-40ac-9bd1-a6dd85b97a71\">Claude<\/a>\u00a0to find the points.<\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KwwGKvY\" src=\"\/\/codepen.io\/anon\/embed\/KwwGKvY?height=450&amp;theme-id=47434&amp;slug-hash=KwwGKvY&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KwwGKvY\" title=\"CodePen Embed KwwGKvY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Update #2<\/h2>\n\n\n\n<p>Matthew Morete commented below with a tool he made that converts SVG path commands into <code>shape()<\/code> commands, which is awesome. Squircles are one of the provided demos, and the commands are very chill:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.squircle<\/span> {\n  <span class=\"hljs-attribute\">clip-path<\/span>: <span class=\"hljs-built_in\">shape<\/span>(\n    from <span class=\"hljs-number\">0%<\/span> <span class=\"hljs-number\">50%<\/span>, \n    curve by <span class=\"hljs-number\">50%<\/span> -<span class=\"hljs-number\">50%<\/span> with <span class=\"hljs-number\">0%<\/span> -<span class=\"hljs-number\">45%<\/span> \/ <span class=\"hljs-number\">5%<\/span> -<span class=\"hljs-number\">50%<\/span>, \n    smooth by <span class=\"hljs-number\">50%<\/span> <span class=\"hljs-number\">50%<\/span> with <span class=\"hljs-number\">50%<\/span> <span class=\"hljs-number\">5%<\/span>, \n    smooth by -<span class=\"hljs-number\">50%<\/span> <span class=\"hljs-number\">50%<\/span> with -<span class=\"hljs-number\">5%<\/span> <span class=\"hljs-number\">50%<\/span>, \n    smooth by -<span class=\"hljs-number\">50%<\/span> -<span class=\"hljs-number\">50%<\/span> with -<span class=\"hljs-number\">50%<\/span> -<span class=\"hljs-number\">5%<\/span>\n  );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gbbBOXz\" src=\"\/\/codepen.io\/anon\/embed\/gbbBOXz?height=450&amp;theme-id=47434&amp;slug-hash=gbbBOXz&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gbbBOXz\" title=\"CodePen Embed gbbBOXz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Don&#8217;t underestimate `shape()` \u2014 it&#8217;s the CSS version of SVG <path> that we absolutely needed.<\/p>\n","protected":false},"author":1,"featured_media":5927,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[7,352,118],"class_list":["post-5662","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-css","tag-shape","tag-shapes"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/05\/shape_-A-New-Sub-Language-of-CSS-1.jpg?fit=1140%2C676&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5662"}],"version-history":[{"count":21,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5662\/revisions"}],"predecessor-version":[{"id":5841,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5662\/revisions\/5841"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/5927"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}