{"id":347,"date":"2024-05-10T13:00:00","date_gmt":"2024-05-10T13:00:00","guid":{"rendered":"http:\/\/sobre-portugal.com\/?p=347"},"modified":"2024-06-12T20:24:54","modified_gmt":"2024-06-12T20:24:54","slug":"the-modern-guide-for-making-css-shapes","status":"publish","type":"post","link":"http:\/\/sobre-portugal.com\/index.php\/2024\/05\/10\/the-modern-guide-for-making-css-shapes\/","title":{"rendered":"The Modern Guide For Making CSS Shapes"},"content":{"rendered":"<p>              <title>The Modern Guide For Making CSS Shapes<\/title><\/p>\n<article>\n<header>\n<h1>The Modern Guide For Making CSS Shapes<\/h1>\n<address>Temani Afif<\/address>\n<p>                  2024-05-10T13:00:00+00:00<br \/>\n                  2024-06-12T20:05:40+00:00<br \/>\n                <\/header>\n<p>You have for sure googled <em>\u201chow to create [shape_name]<\/em> <em>with<\/em> <em>CSS\u201d<\/em> at least once in your front-end career if it\u2019s not something you already have bookmarked. And the number of articles and demos you will find out there is endless.<\/p>\n<p>Good, right? Copy that code and drop it into the ol\u2019 stylesheet. <em>Ship it!<\/em><\/p>\n<p>The problem is that you don\u2019t understand how the copied code works. Sure, it got the job done, but many of the most widely used CSS shape snippets are often dated and rely on things like magic numbers to get the shapes just right. So, the next time you go into the code needing to make a change to it, it either makes little sense or is inflexible to the point that you need an entirely new solution.<\/p>\n<p>So, here it is, your <strong>one-stop modern guide for how to create shapes in CSS<\/strong>! We are going to explore the most common CSS shapes while highlighting different CSS tricks and techniques that you can easily re-purpose for any kind of shape. The goal is not to learn how to create specific shapes but rather to understand the modern tricks that allow you to create any kind of shape you want.<\/p>\n<h3 id=\"table-of-contents\">Table of Contents<\/h3>\n<p>You can jump directly to the topic you\u2019re interested in to find relevant shapes or <a href=\"#your-first-resource\">browse the complete list<\/a>. Enjoy!<\/p>\n<ul class=\"toc-components\">\n<li><a href=\"#hexagons\">Hexagons<\/a><\/li>\n<li><a href=\"#octagons\">Octagons<\/a><\/li>\n<li><a href=\"#stars\">Stars<\/a><\/li>\n<li><a href=\"#polygons-starbursts\">Polygons &amp; Starbursts<\/a><\/li>\n<li><a href=\"#parallelograms-trapezoids\">Parallelograms &amp; Trapezoids<\/a><\/li>\n<li><a href=\"#circles-holes\">Circles &amp; Holes<\/a><\/li>\n<li><a href=\"#border-edges\">Border Edges<\/a><\/li>\n<li><a href=\"#rounded-arcs\">Rounded Arcs<\/a><\/li>\n<li><a href=\"#dashed-circles\">Dashed Circles<\/a><\/li>\n<li><a href=\"#rounded-tabs\">Rounded Tabs<\/a><\/li>\n<li><a href=\"#triangles\">Triangles<\/a><\/li>\n<li><a href=\"#hearts\">Hearts<\/a><\/li>\n<li><a href=\"#ribbons\">Ribbons<\/a><\/li>\n<li><a href=\"#tooltips-speech-bubbles\">Tooltips &amp; Speech Bubbles<\/a><\/li>\n<li><a href=\"#cutting-corners\">Cutting Corners<\/a><\/li>\n<li><a href=\"#section-dividers\">Section Dividers<\/a><\/li>\n<li><a href=\"#floral-shapes\">Floral Shapes<\/a><\/li>\n<\/ul>\n<h2 id=\"why-not-svg\">Why Not SVG?<\/h2>\n<p>I get asked this question often, and my answer is always the same: <em>Use SVG if you<\/em> <em>can!<\/em> I have nothing against SVG. It\u2019s just another approach for creating shapes using another syntax with another set of considerations. If SVG was my expertise, then I would be writing about that instead!<\/p>\n<p>CSS is my field of expertise, so that\u2019s the approach we\u2019re covering for drawing shapes with code. Choosing CSS or SVG is typically a matter of choice. There may very well be a good reason why SVG is a better fit for your specific needs.<\/p>\n<p>Many times, CSS will be your best bet for decorative things or when you\u2019re working with a specific element in the markup that contains real content to be styled. Ultimately, though, you will need to consider what your project\u2019s requirements are and decide whether a CSS shape is really what you are looking for.<\/p>\n<h2 id=\"your-first-resource\">Your First Resource<\/h2>\n<p>Before we start digging into code, please spend a few minutes over at my <a href=\"https:\/\/css-shape.com\/\">CSS Shape website<\/a>. You will find many examples of CSS-only shapes. This is an ever-growing collection that I regularly maintain with new shapes and techniques. Bookmark it and use it as a reference as we make our way through this guide.<\/p>\n<blockquote><p>Is it fairly easy to modify and tweak the CSS for those shapes?<\/p><\/blockquote>\n<p>Yes! The CSS for each and every shape is optimized to be as flexible and efficient as possible. The CSS typically targets a <strong>single HTML element<\/strong> to prevent you from having to touch too much markup besides dropping the element on the page. Additionally, I make liberal use of CSS variables that allow you to modify things easily for your needs.<\/p>\n<p>Most of you don&rsquo;t have time to grasp all the techniques and tricks to create different shapes, so an online resource with ready-to-use snippets of code can be a lifesaver!<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img decoding=\"async\" loading=\"lazy\" class=\"feature-panel-image-img\" src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\" alt=\"Feature Panel\" width=\"257\" height=\"355\" \/><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"clipping-shapes-in-css\">Clipping Shapes In CSS<\/h2>\n<p>The CSS <code>clip-path<\/code> property \u2014 and its <code>polygon()<\/code> function \u2014 is what we commonly reach for when creating CSS Shapes. Through the creation of common CSS shapes, we will learn a few tricks that can help you create other shapes easily.<\/p>\n<h3 id=\"hexagons\">Hexagons<\/h3>\n<p>Let\u2019s start with one of the easiest shapes; the hexagon. We first define the shape\u2019s dimensions, then provide the coordinates for the six points and we are done.<\/p>\n<pre><code class=\"language-css\">.hexagon {\n  width: 200px;\n  aspect-ratio: 0.866; \n  clip-path: polygon(\n    0% 25%,\n    0% 75%,\n    50% 100%, \n    100% 75%, \n    100% 25%, \n    50% 0%);\n}\n<\/code><\/pre>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"JjVJJbG\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Hexagon shape using clip-path](https:\/\/codepen.io\/t_afif\/pen\/JjVJJbG) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/JjVJJbG\">Hexagon shape using clip-path<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>Easy, right? But what if I told you that there\u2019s an even <em>easier<\/em> way to do it? Instead of six points, we can get by with just four.<\/p>\n<p>A little-known trick with the <code>polygon()<\/code> function is that we are allowed to set points that are outside the <code>[0% 100%]<\/code> range. In other words, we can cut <em>outside<\/em> the element \u2014 which becomes super useful for this shape as well many others, as we\u2019ll see.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/1-clipping-hexagon-four-points.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"270\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/1-clipping-hexagon-four-points.png\" alt=\"Comparing a hexagon with six points versus a hexagon clipped with four points.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 1: Clipping a hexagon with four points. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/1-clipping-hexagon-four-points.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>We\u2019re basically drawing the shape of a diamond where two of the points are set way outside the bounds of the hexagon we\u2019re trying to make. This is perhaps the very first lesson for drawing CSS shapes: <strong>Allow yourself to think outside the box \u2014 or at least the shape\u2019s boundaries.<\/strong><\/p>\n<p>Look how much simpler the code already looks:<\/p>\n<pre><code class=\"language-css\">.hexagon {\n  width: 200px;\n  aspect-ratio: cos(30deg); \n  clip-path: polygon(\n    -50% 50%,\n    50% 100%,\n    150% 50%,\n    50% 0\n  );\n}\n<\/code><\/pre>\n<p>Did you notice that I updated the <code>aspect-ratio<\/code> property in there? I\u2019m using a trigonometric function, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/cos\"><code>cos()<\/code><\/a>, to replace the magic number <code>0.866<\/code>. The exact value of the ratio is equal to <code>cos(30deg)<\/code> (or <code>sin(60deg)<\/code>). Besides, <code>cos(30deg)<\/code> is a lot easier to remember than <code>0.866<\/code>.<\/p>\n<p>Here\u2019s something fun we can do: swap the X and Y coordinate values. In other words, let\u2019s change the <code>polygon()<\/code> coordinates from this pattern:<\/p>\n<pre><code class=\"language-css\">clip-path: polygon(X1 Y1, X2 Y2, ..., Xn Yn)\n<\/code><\/pre>\n<p>\u2026to this, where the Y values come before the X values:<\/p>\n<pre><code class=\"language-css\">clip-path: polygon(Y1 X1, Y2 X2, ..., Yn Xn)\n<\/code><\/pre>\n<p>What we get is a new variation of the hexagon:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"BaEZrrP\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Another variation of the hexagon shape](https:\/\/codepen.io\/t_afif\/pen\/BaEZrrP) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/BaEZrrP\">Another variation of the hexagon shape<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>Swapping the X and Y values will make a kind of switch between the vertical and horizontal axes, which will help to get a different shape. Note that I have also updated the ratio to <code>1\/cos(30deg)<\/code> instead of <code>cos(30deg)<\/code>. Since we are switching both axes, the new ratio needs to be equal to its inverse, i.e., <code>R<\/code> (or <code>R\/1<\/code>) becomes <code>1\/R<\/code>.<\/p>\n<p>And since our CSS is nothing more than a single style rule on a single selector, we can apply it to more than a <code>&lt;div&gt;<\/code>. For example, the following demo includes both variations of the original hexagon, plus a third example that sets the styles on an <code>&lt;img&gt;<\/code> element.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"KKEMjxV\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [CSS-only hexagon shapes (the modern way)](https:\/\/codepen.io\/t_afif\/pen\/KKEMjxV) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/KKEMjxV\">CSS-only hexagon shapes (the modern way)<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>There we go, our first shape! We are also walking away with two valuable lessons about creating shapes with CSS:<\/p>\n<ul>\n<li><strong>The <code>polygon()<\/code> function accepts points outside the <code>[0% 100%]<\/code> range.<\/strong><br \/>\nThis allows us to clip shapes with fewer points in some cases but also opens up possibilities for creating additional shapes.<\/li>\n<li><strong>Switching axes is a solid approach for creating shape variations.<\/strong><br \/>\nIn the case of a hexagon, swapping the values on the X and Y axes changes the hexagon\u2019s direction.<\/li>\n<\/ul>\n<h3 id=\"octagons\">Octagons<\/h3>\n<p>An octagon is another geometric shape and it is very close in nature to the hexagon. Instead of working with six sides, we\u2019re working with eight to get what looks like the shape of a common traffic stop sign.<\/p>\n<p>Let\u2019s take the first lesson we learned from working with hexagons and clip the element with coordinates outside the shape\u2019s boundaries to keep our clipping efficient. Believe it or not, we can actually establish all eight octagon sides with only four points, just like we used only four points to establish the hexagon\u2019s six sides.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/2-clipping-octagon-four-points.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"312\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/2-clipping-octagon-four-points.png\" alt=\"Comparing an octagon with eight points versus an octagon clipped with four points.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 2: Clipping an octagon with four points. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/2-clipping-octagon-four-points.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>I know that visualizing the shape with outside points can be somewhat difficult because we\u2019re practically turning the concept of clipping on its head. But with some practice, you get used to this mental model and develop muscle memory for it.<\/p>\n<p>Notice that the CSS is remarkably similar to what we used to create a hexagon:<\/p>\n<pre><code class=\"language-css\">.octagon {\n  width: 200px;  \n  aspect-ratio: 1;  \n  --o: calc(50% &#042; tan(-22.5deg));\n  clip-path: polygon(\n    var(--o) 50%,\n    50% var(--o),\n    calc(100% - var(--o)) 50%,\n    50% calc(100% - var(--o))\n  );\n}\n<\/code><\/pre>\n<p>Except for the small trigonometric formula, the structure of the code is identical to the last hexagon shape \u2014 set the shape\u2019s dimensions, then clip the points. And notice how I saved the math calculation as a CSS variable to avoid repeating that code.<\/p>\n<p>If math isn\u2019t really your thing \u2014 and that\u2019s totally fine! \u2014 remember that the formulas are simply one part of the puzzle. There\u2019s no need to go back to your high school geometry textbooks. You can always find the formulas you need for specific shapes in <a href=\"https:\/\/css-shape.com\/\">my online collection<\/a>. Again, that collection is your first resource for creating CSS shapes!<\/p>\n<p>And, of course, we can apply this shape to an <code>&lt;img&gt;<\/code> element as easily as we can a <code>&lt;div&gt;<\/code>:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"LYaxqEg\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [CSS-only octagon shapes (the modern way)](https:\/\/codepen.io\/t_afif\/pen\/LYaxqEg) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/LYaxqEg\">CSS-only octagon shapes (the modern way)<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>There\u2019s actually more we can do to optimize our code. Consider the following:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.octa {\n  --w: 200px;\n\nwidth: var(--w);\naspect-ratio: 1;\nmargin: calc(var(--w) * tan(22.5deg) \/ 2);\nclip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%) margin-box;\n} <\/code><\/pre>\n<\/div>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"ZEZrLmr\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Octagon shape with margin-box](https:\/\/codepen.io\/t_afif\/pen\/ZEZrLmr) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/ZEZrLmr\">Octagon shape with margin-box<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>The most obvious difference is that the variable containing the math function (<code>--o<\/code>) is removed, and we have a new one, <code>--w<\/code>, for setting the shape\u2019s dimensions.<\/p>\n<p>But notice that we\u2019re now setting <code>margin<\/code> on the shape and declaring a <code>margin-box<\/code> keyword at the end of the <code>clip-path<\/code>. It means that the reference for the <code>polygon()<\/code> is now set to the <code>margin-box<\/code> instead of the default <code>border-box<\/code>.<\/p>\n<p>If you look back at Figure 2, notice that the four points used to draw the octagon are outside the shape\u2019s boundaries and have the same distance from those boundaries. Instead of accounting for that distance inside the <code>clip-path<\/code>, the updated code declares it on the <code>margin<\/code> property, which makes the values of the coordinates easier to define.<\/p>\n<p>This is the CSS we started with:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.octagon {\n  --o: calc(50% &#042; tan(-22.5deg));\n\nclip-path: polygon(var(--o) 50%, 50% var(--o), calc(100% - var(--o)) 50%, 50% calc(100% - var(--o)));\n} <\/code><\/pre>\n<\/div>\n<p>The optimization simplifies the <code>clip-path<\/code> even if we have an extra property:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.octagon {\n  --w: 200px;\n\nmargin: calc(var(--w) * tan(22.5deg) \/ 2);\nclip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%) margin-box;\n} <\/code><\/pre>\n<\/div>\n<p>All the <code>--o<\/code> variables are removed from the <code>clip-path<\/code>, and the <code>margin<\/code> property gets that same value. I had to introduce a new variable, <code>--w<\/code>, to set the element\u2019s size dimensions because I couldn\u2019t rely on a percentage value. In this particular case, you will end with some margin around the element, but this trick can really help simplify calculations.<\/p>\n<p>If you don\u2019t want the extra margin, you can add padding instead and apply the same amount of padding as a negative margin. That\u2019s another trick to keep polygons simple in a way that works well with images. Here is a demo showing different shapes created with the same <code>clip-path<\/code> value.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"oNOOWqz\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Different shapes using the same polygon](https:\/\/codepen.io\/t_afif\/pen\/oNOOWqz) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/oNOOWqz\">Different shapes using the same polygon<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<h3 id=\"stars\">Stars<\/h3>\n<p>Creating a star shape is always a bit tricky, even if you are comfortable using <code>clip-path<\/code> with the <code>polygon()<\/code> function. Clipping requires very precise values, so we either find a ready-to-use snippet of CSS or fuss with it ourselves until we get it right.<\/p>\n<p>And if I were to ask you how many points we need to cut the shape, you might reasonably respond that 10 points are needed. And you are technically correct. But we can do better using only five points!<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/3-star-shape-five-points.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"318\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/3-star-shape-five-points.png\" alt=\"Diagram of a star with 10 clip points next to a star with five clip points.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 3: Drawing a star shape with five points instead of 10 points. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/3-star-shape-five-points.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>It may sound impossible to make a star out of only five points, but it\u2019s perfectly possible, and the trick is how the points inside <code>polygon()<\/code> are ordered. If we were to draw a star with pencil on paper in a single continuous line, we would follow the following order:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/4-star-single-line.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"382\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/4-star-single-line.png\" alt=\"Gold star with five points that are labeled one through five, starting at the top point.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 4: Drawing a star with a single line illustrates the order of the points we need to create the shape. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/4-star-single-line.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>It\u2019s the same way we used to draw stars as kids \u2014 and it fits perfectly in CSS with <code>polygon()<\/code>! This is another hidden trick about <code>clip-path<\/code> with <code>polygon()<\/code>, and it leads to another key lesson for drawing CSS shapes: <strong>the lines we establish can intersect<\/strong>. Again, we\u2019re sort of turning a concept on its head, even if it\u2019s a pattern we all grew up making by hand.<\/p>\n<p>Here\u2019s how those five points translate to CSS:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.star {\n  width: 200px;  \n  aspect-ratio: 1;\n  clip-path: polygon(50% 0, \/&#042; (1) &#042;\/\n    calc(50%&#042;(1 + sin(.4turn))) calc(50%&#042;(1 - cos(.4turn))), \/&#042; (2) &#042;\/\n    calc(50%&#042;(1 - sin(.2turn))) calc(50%&#042;(1 - cos(.2turn))), \/&#042; (3) &#042;\/\n    calc(50%&#042;(1 + sin(.2turn))) calc(50%&#042;(1 - cos(.2turn))), \/&#042; (4) &#042;\/\n    calc(50%&#042;(1 - sin(.4turn))) calc(50%&#042;(1 - cos(.4turn)))  \/&#042; (5) &#042;\/\n   ); \n}\n<\/code><\/pre>\n<\/div>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"NWmvBeL\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Star shape using clip-path](https:\/\/codepen.io\/t_afif\/pen\/NWmvBeL) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/NWmvBeL\">Star shape using clip-path<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>I am using trigonometric functions again for accuracy without resorting to magic numbers, but even if we calculate the values, the code is still better than the traditional 10-point approach:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.star {\n  width: 200px;  \n  aspect-ratio: 1;\n  clip-path: polygon(50% 0, 79% 90%, 2% 35%, 98% 35%, 21% 90%); \n}\n<\/code><\/pre>\n<\/div>\n<p>Since we have a symmetrical shape, note that the second and fifth points on the star share the same Y coordinates. The same is true for the third and fourth points. And notice, too, that the X values have the same distance to the center (<code>79% - 50% = 50% - 21%<\/code>). If we add those up, we see that the sum is equal to <code>100%<\/code> (<code>79% + 21% = 100%<\/code>).<\/p>\n<p>That leads us to yet another major lesson on drawing CSS shapes: <strong>Consider the shape\u2019s symmetry because that\u2019s a big hint that there may be duplicated values.<\/strong> This will reduce your effort in calculating\/finding the different values.<\/p>\n<p>We already cut the number of points once from 10 to five. Now, there are only three points to remember \u2014 the remaining two can be figured out from there, thanks to symmetry.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">50% 0   \/&#042; (1) &#042;\/\n79% 90% \/&#042; (2)  --&gt; (100% - 79%) = 21% 90% \/&#042; (5) &#042;\/\n 2% 35% \/&#042; (3)  --&gt; (100% -  2%) = 98% 35% \/&#042; (4) &#042;\/\n<\/code><\/pre>\n<\/div>\n<p>Go back to the hexagon and octagon shapes and look for symmetry. You will notice repeated values as well, and the <code>clip-path<\/code> will suddenly look easier to remember!<\/p>\n<h3 id=\"polygons-starbursts\">Polygons &amp; Starbursts<\/h3>\n<p>We\u2019ve already covered stars, hexagons, and octagons, but what if you are working with an unknown number of points or sides? You may want a solution that is capable of adjusting the number for whatever situation it is used for. For this, we can consider more generic shapes like polygons and starbursts.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/5-row-three-multi-point-star-shapes.jpg\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"383\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/5-row-three-multi-point-star-shapes.jpg\" alt=\"A row of three multi-point star shapes above a row of three geometric shapes with different numbers of sides.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Geometric shapes come with a number of points and sides. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/5-row-three-multi-point-star-shapes.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The funny thing is that starbursts are basically the exact same thing as polygons, just with half the points that we can move inward.<\/p>\n<figure><a href=\"http:\/\/sobre-portugal.com\/wp-content\/uploads\/2024\/05\/6-illustration-star-morphing-polygon.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/sobre-portugal.com\/wp-content\/uploads\/2024\/05\/6-illustration-star-morphing-polygon.gif\" width=\"600\" height=\"376\" alt=\"Animated illustration of a star morphing into a polygon.\" \/><\/a><figcaption>Figure 6.<\/figcaption><\/figure>\n<p>I often advise people to use my online generators for shapes like these because the <code>clip-path<\/code> coordinates can get tricky to write and calculate by hand.<\/p>\n<ul>\n<li><a href=\"https:\/\/css-generators.com\/polygon-shape\/\">Polygon generator<\/a><\/li>\n<li><a href=\"https:\/\/css-generators.com\/starburst-shape\/\">Starburst generator<\/a><\/li>\n<\/ul>\n<p>That said, I really believe it\u2019s still a very good idea to understand how the coordinates are calculated and how they affect the overall shape. <a href=\"https:\/\/verpex.com\/blog\/website-tips\/css-shapes-polygon-starburst\">I have an entire article on the topic<\/a> for you to learn the nuances of calculating coordinates.<\/p>\n<h3 id=\"parallelograms-trapezoids\">Parallelograms &amp; Trapezoids<\/h3>\n<p>Another common shape we always build is a rectangle shape where we have one or two slanted sides. They have a lot of names depending on the final result (e.g., parallelogram, trapezoid, skewed rectangle, and so on), but all of them are built using the same CSS technique.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/7-parallelograms-trapezoid.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"249\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/7-parallelograms-trapezoid.png\" alt=\"Showing two parallelograms and a trapezoid.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 7: Parallelograms and a trapezoid. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/7-parallelograms-trapezoid.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>First, we start by creating a basic rectangle by linking the four corner points together:<\/p>\n<pre><code class=\"language-css\">clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)\n<\/code><\/pre>\n<p>This code produces nothing because our element is already a rectangle. Also, note that <code>0<\/code> and <code>100%<\/code> are the only values we\u2019re using.<\/p>\n<p>Next, offset some values to get the shape you want. Let\u2019s say our offset needs to be equal to <code>10px<\/code>. If the value is <code>0<\/code>, we update it with <code>10px<\/code>, and if it\u2019s <code>100%<\/code> we update it with <code>calc(100% - 10px)<\/code>. As simple as that!<\/p>\n<blockquote><p>But which value do I need to update and when?<\/p><\/blockquote>\n<p>Try and see! Open your browser\u2019s developer tools and update the values in real-time to see how the shape changes, and you will understand what points you need to update. I would lie if I told you that I write all the shapes from memory without making any mistakes. In most cases, I start with the basic rectangle, and I add or update points until I get the shape I want. Try this as a small homework exercise and create the shapes in Figure 11 by yourself. You can still find all the correct code in <a href=\"https:\/\/css-shape.com\/\">my online collection<\/a> for reference.<\/p>\n<p>If you want more CSS tricks around the <code>clip-path<\/code> property, check my article \u201c<a href=\"https:\/\/verpex.com\/blog\/website-tips\/css-tricks-to-master-the-clip-path-property\">CSS Tricks To Master The <code>clip-path<\/code> Property<\/a>\u201d which is a good follow-up to this section.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"masking-shapes-in-css\">Masking Shapes In CSS<\/h2>\n<p>We just worked with a number of shapes that required us to figure out a number of points and <code>clip-path<\/code> by plotting their coordinates in a <code>polygon()<\/code>. In this section, we will cover circular and curvy shapes while introducing the other property you will use the most when creating CSS shapes: the <code>mask<\/code> property.<\/p>\n<p>Like the previous section, we will create some shapes while highlighting the main tricks you need to know. Don\u2019t forget that the goal is not to learn how to create specific shapes but to learn the tricks that allow you to create any kind of shape.<\/p>\n<h3 id=\"circles-holes\">Circles &amp; Holes<\/h3>\n<p>When talking about the <code>mask<\/code> property, gradients are certain to come up. We can, for example, \u201ccut\u201d (but really \u201cmask\u201d) a circular hole out of an element with a <code>radial-gradient<\/code>:<\/p>\n<pre><code class=\"language-css\">mask: radial-gradient(50px, #0000 98%, #000);\n<\/code><\/pre>\n<p>Why aren\u2019t we using a simple <code>background<\/code> instead? The <code>mask<\/code> property allows us more flexibility, like using any color we want and applying the effect on a variety of other elements, such as <code>&lt;img&gt;<\/code>. If the color and flexible utility aren\u2019t a big deal, then you can certainly reach for the <code>background<\/code> property instead of cutting a hole.<\/p>\n<p>Here\u2019s the <code>mask<\/code> working on both a <code>&lt;div&gt;<\/code> and <code>&lt;img&gt;<\/code>:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"OJGgGve\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Hole shape](https:\/\/codepen.io\/t_afif\/pen\/OJGgGve) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/OJGgGve\">Hole shape<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>It\u2019s here that I\u2019d like to call out yet another lesson for creating shapes in CSS: <strong>The colors we use in gradients are completely unimportant when working with <code>mask<\/code>.<\/strong><\/p>\n<p>All we care about is the color value\u2019s alpha channel because transparency is what is <code>mask<\/code>-ed out of the element, establishing the circular hole in the center. The gradient\u2019s opaque colors preserve the visibility of the rest of the element. That\u2019s why you will often see me using a black color value (e.g., <code>#000<\/code>) for the visible part and a transparent color (e.g., <code>#0000<\/code>) for the invisible part.<\/p>\n<p>Notice the hard color stops in the gradient. A smooth transition between colors would lead to blurry lines. If we remove that transition and sharply change from one color to another, we get smooth, sharp edges. But not totally! I prefer to keep a very small transition (<code>98%<\/code> instead of <code>100%<\/code>) to avoid jagged edges.<\/p>\n<p>And with a simple <code>radial-gradient<\/code>, we can achieve a lot of shapes, like cutting a circle from the top or bottom of an element.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"MWRvBOL\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Circular cut from the top &amp; bottom](https:\/\/codepen.io\/t_afif\/pen\/MWRvBOL) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/MWRvBOL\">Circular cut from the top &amp; bottom<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>Let\u2019s change it up and make the cut from the top and the bottom edges at the same time:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"WNWEKdy\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Circular Cut at top and bottom](https:\/\/codepen.io\/t_afif\/pen\/WNWEKdy) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/WNWEKdy\">Circular Cut at top and bottom<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>If we give the gradient an explicit size, then it will repeat, resulting in yet another fancy shape, a scooped border:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"eYoEjVa\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Scooped edges from top and bottom](https:\/\/codepen.io\/t_afif\/pen\/eYoEjVa) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/eYoEjVa\">Scooped edges from top and bottom<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>Rather than dissecting the code for that last example, I want you to peek at the CSS and see for yourself how the <code>radial-gradient<\/code> is configured. You will notice that we went from a simple hole to a fancy border decoration by making only a few changes.<\/p>\n<h3 id=\"border-edges\">Border Edges<\/h3>\n<p>The previous demo is one example of many fancy borders we can create. We can go wavy, spiked, scalloped, and more!<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/8-scalloped-zig-zag-wavy-borders.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"198\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/8-scalloped-zig-zag-wavy-borders.png\" alt=\"Scalloped, zig-zag, and wavy borders\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 8. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/8-scalloped-zig-zag-wavy-borders.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Once again, it\u2019s all about CSS masks and gradients. In the following articles, I provide you with examples and recipes for many different possibilities:<\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/css-borders-using-masks\/\">Fancy CSS Borders Using Masks<\/a>\u201d (CSS-Tricks)<\/li>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/how-to-create-wavy-shapes-patterns-in-css\/\">How to Create Wavy Shapes &amp; Patterns in CSS<\/a>\u201d (CSS-Tricks)<\/li>\n<\/ul>\n<p>Be sure to make it to the end of the second article to see how this technique can be used as <a href=\"https:\/\/css-pattern.com\/\">decorative background patterns<\/a>.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"vYddpzK\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [CSS only pattern](https:\/\/codepen.io\/t_afif\/pen\/vYddpzK) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/vYddpzK\">CSS only pattern<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<h3 id=\"rounded-arcs\">Rounded Arcs<\/h3>\n<p>This is another instance where CSS gradients are the perfect fit for <code>mask<\/code>-ing shapes. You\u2019ve probably seen this type of shape a gazillion times because it\u2019s a common pattern for animated loading indications.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/9-circular-progress-element.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"281\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/9-circular-progress-element.png\" alt=\"Circular progress element with rounded edges and gradient coloration\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 9: Circular progress element with rounded edges and gradient coloration. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/9-circular-progress-element.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>This time, we are going to introduce another technique which is \u201ccomposition\u201d. It\u2019s an operation we perform between two gradient layers. We either use <code>mask-composite<\/code> to define it, or we declare the values on the <code>mask<\/code> property.<\/p>\n<p>The figure below illustrates the gradient configuration and the composition between each layer.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/10-steps-full-circle-unclosed-circle-rounded-edges.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"424\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/10-steps-full-circle-unclosed-circle-rounded-edges.png\" alt=\"Showing the steps that go from a full circle to an unclosed circle with rounded edges.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 10: Combining radial and conical gradients to establish the final shape. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/10-steps-full-circle-unclosed-circle-rounded-edges.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>We start with a <code>radial-gradient<\/code> to create a full circle shape. Then we use a <code>conic-gradient<\/code> to create the shape below it. Between the two gradients, we perform an \u201cintersect\u201d composition to get the unclosed circle. Then we tack on two more radial gradients to the <code>mask<\/code> to get those nice rounded endpoints on the unclosed circle. This time we consider the default composition, \u201cadd\u201d.<\/p>\n<p>Gradients aren\u2019t something new as we use them a lot with the <code>background<\/code> property but \u201ccomposition\u201d is the new concept I want you to keep in mind. It\u2019s a very handy one that unlocks a lot of possibilities.<\/p>\n<p>Ready for the CSS?<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.arc {\n  --b: 40px; \/&#042; border thickness &#042;\/\n  --a: 240deg; \/&#042; progression &#042;\/  \n\n--_g:\/var(--b) var(--b) radial-gradient(50% 50%,#000 98%,#0000) no-repeat;\nmask:\ntop var(--_g),\ncalc(50% + 50% * sin(var(--a)))\ncalc(50% - 50% * cos(var(--a))) var(--_g),\nconic-gradient(#000 var(--a), #0000 0) intersect,\nradial-gradient(50% 50%, #0000 calc(100% - var(--b)), #000 0 98%, #0000)\n} <\/code><\/pre>\n<\/div>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"eYoEpom\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Progress circle using mask](https:\/\/codepen.io\/t_afif\/pen\/eYoEpom) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/eYoEpom\">Progress circle using mask<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>Even if the code looks a bit complex at first glance, the use of CSS variables makes things easier to adjust. That\u2019s an important CSS technique I am using in most of <a href=\"https:\/\/css-shape.com\/\">the shapes I have created<\/a>. Many of them require complex formulas and a lot of gradients, but in the end, all you have to do is adjust a few variables to control the shape. So, let\u2019s not spend too much time explaining the math expressions. I want to focus on the tricks and techniques because the CSS concepts are what is important; remember, you can always grab the math. How CSS uses it is key.<\/p>\n<p>Notice that we can achieve the same result using different gradient combinations. It\u2019s weird because the syntax looks completely different. This snippet accomplishes the same visual result.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.arc {\n  --b: 40px; \/&#042; border thickness &#042;\/\n  --a: 250deg; \/&#042; progression &#042;\/\n\npadding: var(--b);\nborder-radius: 50%;\n\n--_g: \/var(--b) var(--b) radial-gradient(50% 50%, #000 97%, #0000 99%) no-repeat;\nmask:\ntop var(--_g),\ncalc(50% + 50% * sin(var(--a)))\ncalc(50% - 50% * cos(var(--a))) var(--_g),\nlinear-gradient(#0000 0 0) content-box intersect,\nconic-gradient(#000 var(--a), #0000 0);\n} <\/code><\/pre>\n<\/div>\n<p>I added <code>border-radius<\/code> in there to round the element and added <code>padding<\/code> equal to the border\u2019s thickness. Then, if you check the gradient used in the <code>mask<\/code>, you will see that I have changed the <code>radial-gradient<\/code> with a <code>linear-gradient<\/code> containing a single transparent color that covers the element\u2019s <code>content-box<\/code>.<\/p>\n<p>Sure, there are two more variables using this approach, but I did simplify the overall gradient at the same time. Yet another valid approach for the same effect.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"WNWErpV\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Untitled](https:\/\/codepen.io\/t_afif\/pen\/WNWErpV) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/WNWErpV\">Untitled<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<h3 id=\"dashed-circles\">Dashed Circles<\/h3>\n<p>We can produce additional circular shapes with dashed edges using the same code we just wrote:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"KKvjjZN\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Dashed border](https:\/\/codepen.io\/t_afif\/pen\/KKvjjZN) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/KKvjjZN\">Dashed border<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>This time we\u2019re combining two gradients in our <code>mask<\/code>. One is a black-to-transparent <code>repeating-conic-gradient<\/code> and the other is a transparent <code>linear-gradient<\/code> configured to cover the element up to its <code>content-box<\/code> and the <code>mask-composite<\/code> property is set to <code>intersect<\/code>.<\/p>\n<pre><code class=\"language-css\">mask:\n linear-gradient(#0000 0 0) content-box intersect,\n repeating-conic-gradient( \/&#042; ... &#042;\/ );\n<\/code><\/pre>\n<p>If you want to dig deeper into <code>mask-composite<\/code>, I advise you to read \u201c<a href=\"https:\/\/css-tricks.com\/mask-compositing-the-crash-course\/\">Mask Compositing: The Crash Course<\/a>\u201d by Ana Tudor.<\/p>\n<h3 id=\"rounded-tabs\">Rounded Tabs<\/h3>\n<p>Tabs are a super common design pattern. Each tab is connected to a panel of content where clicking a tab reveals that panel of content. Tabs can be rectangular, but we often think of them as rounded, the way they are on actual paper file folders.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/11-manilla-folder.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"323\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/11-manilla-folder.png\" alt=\"An empty light brown manilla folder.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 11. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/11-manilla-folder.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>We could get clever and use a pseudo-element for the shape that\u2019s positioned behind the set of panels, but that introduces more complexity and fixed values than we ought to have. Instead, we can continue using CSS masks to get the perfect shape with a minimal amount of reusable code.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/12-tab-shape.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"325\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/12-tab-shape.png\" alt=\"Tab shape with rounded top edges and a gradient background with muted red colors.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 12. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/12-tab-shape.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>It\u2019s not really the rounded top edges that are difficult to pull off, but the bottom portion that curves inwards instead of rounding in like the top. And even then, we already know the secret sauce: using CSS masks by combining gradients that reveal just the parts we want.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/13-steps-mask-shape.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"378\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/13-steps-mask-shape.png\" alt=\"Illustrating the four steps to mask the shape.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 13. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/13-steps-mask-shape.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>We start by adding a border around the element \u2014 excluding the bottom edge \u2014 and applying a <code>border-radius<\/code> on the top-left and top-right corners.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.tab {\n  --r: 40px; \/&#042; radius size &#042;\/\n\nborder: var(--r) solid #0000; \/* transparent black *\/\nborder-bottom: 0;\nborder-radius: calc(2 * var(--r)) calc(2 * var(--r)) 0 0;\n} <\/code><\/pre>\n<\/div>\n<p>Next, we add the first mask layer. We only want to show the padding area (i.e., the red area highlighted in Figure 10).<\/p>\n<pre><code class=\"language-css\">mask: linear-gradient(#000 0 0) padding-box;\n<\/code><\/pre>\n<p>Let\u2019s add two more gradients, both radial, to show those bottom curves.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">mask: \n  radial-gradient(100% 100% at 0 0, #0000 98%, #000) 0 100% \/ var(--r) var(--r), \n  radial-gradient(100% 100% at 100% 0, #0000 98%, #000) 100% 100% \/ var(--r) var(--r), \n  linear-gradient(#000 0 0) padding-box;\n<\/code><\/pre>\n<\/div>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/14-radial-gradients.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"317\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/14-radial-gradients.png\" alt=\"Showing the radial gradients used to create the shape\u2019s inner curve.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 14. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/14-radial-gradients.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Here is how the full code comes together:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.tab {\n  --r: 40px; \/&#042; control the radius &#042;\/\n\nborder: var(--r) solid #0000;\nborder-bottom: 0;\nborder-radius: calc(2 * var(--r)) calc(2 * var(--r)) 0 0;\nmask:\nradial-gradient(100% 100% at 0 0, #0000 98%, #000) 0 100% \/ var(--r) var(--r),\nradial-gradient(100% 100% at 100% 0, #0000 98%, #000) 100% 100% \/ var(--r) var(--r),\nlinear-gradient(#000 0 0) padding-box;\nmask-repeat: no-repeat;\nbackground: linear-gradient(60deg, #BD5532, #601848) border-box;\n} <\/code><\/pre>\n<\/div>\n<p>As usual, all it takes is one variable to control the shape. Let\u2019s zero-in on the <code>border-radius<\/code> declaration for a moment:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">border-radius: calc(2 &#042; var(--r)) calc(2 &#042; var(--r)) 0 0;\n<\/code><\/pre>\n<\/div>\n<p>Notice that the shape\u2019s rounded top edges are equal to two times the radius (<code>--r<\/code>) value. If you\u2019re wondering why we need a calculation here at all, it\u2019s because we have a transparent border hanging out there, and we need to double the radius to account for it. The radius of the blue areas highlighted in Figure 13 is equal to <code>2 * R<\/code> while the red area highlighted in the same figure is equal to <code>2 * R - R<\/code>, or simply <code>R<\/code>.<\/p>\n<p>We can actually optimize the code so that we only need two gradients \u2014 one linear and one radial \u2014 instead of three. I\u2019ll drop that into the following demo for you to pick apart. Can you figure out how we were able to eliminate one of the gradients?<\/p>\n<p>I\u2019ll throw in two additional variations for you to investigate:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"JjVpPmr\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Rounded tab using CSS mask](https:\/\/codepen.io\/t_afif\/pen\/JjVpPmr) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/JjVpPmr\">Rounded tab using CSS mask<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>I\u2019m often asked how I know when my code can be optimized more than it is. That\u2019s truly the most difficult part of everything we\u2019ve covered so far. I do not have any hard rules for how and when to optimize, and it\u2019s not necessary to find the optimal solution, especially if you are a beginner. My advice is to first find the trivial and easy solution, even if it requires a lot of gradients. Then, with a lot of practice, you will be able to find better solutions.<\/p>\n<p>Talking about practice, here\u2019s your next bit of homework: try creating the shapes illustrated in Figure 15:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/15-variations-tabs-tooltips.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"408\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/15-variations-tabs-tooltips.png\" alt=\"Six variations of tabs and tooltips with rounded corners and edges.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 15. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/15-variations-tabs-tooltips.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>These aren\u2019t tabs at all but tooltips! We can absolutely use the exact same masking technique we used to create the tabs for these shapes. Notice how the curves that go inward are consistent in each shape, no matter if they are positioned on the left, right, or both.<\/p>\n<p>You can always find the code over at <a href=\"https:\/\/css-generators.com\/tooltip-speech-bubble\/\">my online collection<\/a> if you want to reference it.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"more-css-shapes\">More CSS Shapes<\/h2>\n<p>At this point, we\u2019ve seen the main tricks to create CSS shapes. You will rely on <code>mask<\/code> and gradients if you have curves and rounded parts or <code>clip-path<\/code> when there are no curves. It sounds simple but there\u2019s still more to learn, so I am going to provide a few more common shapes for you to explore.<\/p>\n<p>Instead of going into a detailed explanation of the shapes in this section, I\u2019m going to give you the recipes for how to make them and all of the ingredients you need to make it happen. In fact, I have written other articles that are directly related to everything we are about to cover and will link them up so that you have guides you can reference in your work.<\/p>\n<h3 id=\"triangles\">Triangles<\/h3>\n<p>A triangle is likely the first shape that you will ever need. They\u2019re used in lots of places, from play buttons for videos, to decorative icons in links, to active state indicators, to open\/close toggles in accordions, to\u2026 the list goes on.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/16-triangle-shape-variations.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"390\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/16-triangle-shape-variations.png\" alt=\"Six triangle shape variations.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 16. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/16-triangle-shape-variations.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Creating a triangle shape is as simple as using a 3-point polygon in addition to defining the size:<\/p>\n<pre><code class=\"language-css\">.triangle {\n  width: 200px;\n  aspect-ratio: 1;\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n<\/code><\/pre>\n<p>But we can get even further by adding more points to have border-only variations:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"XWGzJpP\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [border-only triangle shapes](https:\/\/codepen.io\/t_afif\/pen\/XWGzJpP) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/XWGzJpP\">border-only triangle shapes<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>Or combine <code>clip-path<\/code> and <code>mask<\/code> to get rounded corner variations:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"QWovwoW\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Rounded triangles (the modern way)](https:\/\/codepen.io\/t_afif\/pen\/QWovwoW) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/QWovwoW\">Rounded triangles (the modern way)<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>Please check out my article \u201c<a href=\"https:\/\/verpex.com\/blog\/website-tips\/css-shapes-the-triangle\">CSS Shapes: The Triangle<\/a>\u201d on the Verpex blog for a full explanation of techniques with many examples and variations.<\/p>\n<h3 id=\"hearts\">Hearts<\/h3>\n<p>Hearts are another classic shape that\u2019s been tackled with <a href=\"https:\/\/css-tricks.com\/hearts-in-html-and-css\/\">older CSS techniques<\/a> but have a better modern equivalent. We can pull this off more simply by combining <code>border-image<\/code> and <code>clip-path<\/code>:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.heart {\n  --c: red;\n\nwidth: 200px;\naspect-ratio: 1;\nborder-image: radial-gradient(var(--c) 69%,#0000 70%) 84.5%\/50%;\nclip-path: polygon(-42% 0,50% 91%, 142% 0);\n} <\/code><\/pre>\n<\/div>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"MWPOJpP\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Heart shape using border-image](https:\/\/codepen.io\/t_afif\/pen\/MWPOJpP) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/MWPOJpP\">Heart shape using border-image<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>Or use <code>mask-border<\/code> instead of <code>border-image<\/code> to transform images into hearts:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"PoRwjPM\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [CSS only heart images](https:\/\/codepen.io\/t_afif\/pen\/PoRwjPM) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/PoRwjPM\">CSS only heart images<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>The full explanation with additional examples is available in my article \u201c<a href=\"https:\/\/verpex.com\/blog\/website-tips\/css-shapes-the-heart\">CSS Shapes: The Heart<\/a>\u201d over at the Verpex blog.<\/p>\n<h3 id=\"ribbons\">Ribbons<\/h3>\n<p>Ribbons were all the rage back when <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/skeuomorphism\">skeuomorphism<\/a> was the design fad <em>du jour<\/em>. They\u2019re still awesome today, and <a href=\"https:\/\/css-generators.com\/ribbon-shapes\/\">I\u2019ve created a big ol\u2019 collection of them<\/a> with more than 100 shapes.<\/p>\n<p>There are many different types of ribbons, as you might imagine. So, rather than detail one I will provide you with four articles I have written detailing the general technique (more clips!) and a variety of fun variations for you to consider.<\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/11\/css-responsive-multi-line-ribbon-shapes-part1\/\">CSS Responsive Multi-Line Ribbon Shapes, Part 1<\/a>\u201d (Smashing Magazine)<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/11\/css-responsive-multi-line-ribbon-shapes-part2\/\">CSS Responsive Multi-Line Ribbon Shapes, Part 2<\/a>\u201d (Smashing Magazine)<\/li>\n<li>\u201c<a href=\"https:\/\/verpex.com\/blog\/website-tips\/css-shapes-the-ribbon\">CSS Shapes: The Ribbon<\/a>\u201d (Verpex Blog)<\/li>\n<li>\u201c<a href=\"https:\/\/www.sitepoint.com\/css-ribbons-single-element\/\">How to Create CSS Ribbon Shapes with a Single Element<\/a>\u201d (SitePoint)<\/li>\n<\/ul>\n<h3 id=\"tooltips-speech-bubbles\">Tooltips &amp; Speech Bubbles<\/h3>\n<p>Like ribbons, there are so many ways we can design a tooltip or a speech bubble; so many that <a href=\"https:\/\/css-generators.com\/tooltip-speech-bubble\/\">I have another collection showcasing more than 100 of them<\/a>. The following two-part series provides all of the nitty-gritty details:<\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2024\/03\/modern-css-tooltips-speech-bubbles-part1\/\">Modern CSS Tooltips And Speech Bubbles, Part 1<\/a>\u201d (Smashing Magazine)<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2024\/03\/modern-css-tooltips-speech-bubbles-part2\/\">Modern CSS Tooltips And Speech Bubbles, Part 2<\/a>\u201d (Smashing Magazine)<\/li>\n<\/ul>\n<p>By the end, you can literally create as many variations as you can imagine.<\/p>\n<h3 id=\"cutting-corners\">Cutting Corners<\/h3>\n<p>Insert your obligatory joke about how we\u2019re supposed to cut corners in life. However, when we cut corners out of squares and rectangles, the result is a nice decorative shape that also works as a frame for images.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/17-cutting-corners.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"284\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/17-cutting-corners.png\" alt=\"Squares with cut corners\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 17. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/17-cutting-corners.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>We can cut all the corners or just specific ones. We can make circular cuts or sharp ones. We can even create an outline of the overall shape. Take a look at <a href=\"https:\/\/css-generators.com\/custom-corners\/\">my online generator<\/a> to play with the code, and <a href=\"https:\/\/css-tricks.com\/cut-corners-using-css-mask-and-clip-path-properties\/\">check out my full article on the topic<\/a> where I am detailing all the different cases.<\/p>\n<h3 id=\"section-dividers\">Section Dividers<\/h3>\n<p>Speaking of visual transitions between sections, what if both sections have decorative borders that fit together like a puzzle?<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/18-section-dividers.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"210\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/18-section-dividers.png\" alt=\"Three examples of section dividers, one a narrow-angle, one a circular, and one a wide angle.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 18. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/18-section-dividers.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>I hope you see the pattern now: sometimes, we\u2019re clipping an element or masking portions of it. The fact that we can sort of \u201ccarve\u201d into things this way using <code>polygon()<\/code> coordinates and gradients opens up so many possibilities that would have required clever workarounds and super-specific code in years past.<\/p>\n<p>See my article \u201c<a href=\"https:\/\/www.freecodecamp.org\/news\/section-divider-using-css\/\">How to Create a Section Divider Using CSS<\/a>\u201d on the freeCodeCamp blog for a deep dive into the concepts, which we\u2019ve also covered here quite extensively already in earlier sections.<\/p>\n<h3 id=\"floral-shapes\">Floral Shapes<\/h3>\n<p>We\u2019ve created circles. We\u2019ve made wave shapes. Let\u2019s combine those two ideas together to create <em>floral shapes<\/em>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/19-flower-like-shapes.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"261\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/19-flower-like-shapes.png\" alt=\"Different flower-like shapes\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 19. (<a href=\"https:\/\/files.smashing.media\/articles\/modern-guide-making-css-shapes\/19-flower-like-shapes.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>These shapes are pretty cool on their own. But like a few of the other shapes we\u2019ve covered, this one works extremely well with images. If you need something fancier than the typical box, then masking the edges can come off like a custom-framed photo.<\/p>\n<p>Here is a demo where I am using such shapes to create <a href=\"https:\/\/www.smashingmagazine.com\/2023\/09\/re-creating-pop-out-hover-effect-css-part1\/\">a fancy hover effect<\/a>:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"qBQzrwq\" data-user=\"t_afif\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Fancy Pop Out hover effect!](https:\/\/codepen.io\/t_afif\/pen\/qBQzrwq) by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/t_afif\/pen\/qBQzrwq\">Fancy Pop Out hover effect!<\/a> by <a href=\"https:\/\/codepen.io\/t_afif\">Temani Afif<\/a>.<\/figcaption><\/figure>\n<p>There\u2019s a lot of math involved with this, specifically trigonometric functions. I have a two-part series that gets into the weeds if you\u2019re interested in that side of things:<\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/frontendmasters.com\/blog\/creating-flower-shapes-using-css-mask-trigonometric-functions\/\">Creating Flower Shapes using CSS Mask &amp; Trigonometric Functions<\/a>\u201d (Frontend Masters)<\/li>\n<li>\u201c<a href=\"https:\/\/frontendmasters.com\/blog\/creating-wavy-circles-with-fancy-animations\/\">Creating Wavy Circles with Fancy Animations in CSS<\/a>\u201d (Frontend Masters)<\/li>\n<\/ul>\n<p>As always, remember that <a href=\"https:\/\/css-shape.com\/\">my online collection<\/a> is your Number One resource for all things related to CSS shapes. The math has already been worked out for your convenience, but you also have the references you need to understand how it works under the hood.<\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>I hope you see CSS Shapes differently now as a result of reading this comprehensive guide. We covered a few shapes, but really, it\u2019s hundreds upon hundreds of shapes because you see how flexible they are to configure into a slew of variations.<\/p>\n<p>At the end of the day, all of the shapes use some combination of different CSS concepts such as clipping, masking, composition, gradients, CSS variables, and so on. Not to mention a few hidden tricks like the one related to the <code>polygon()<\/code> function:<\/p>\n<ul>\n<li>It accepts points outside the <code>[0% 100%]<\/code> range.<\/li>\n<li>Switching axes is a solid approach for creating shape variations.<\/li>\n<li>The lines we establish can intersect.<\/li>\n<\/ul>\n<p>It\u2019s not <em>that<\/em> many things, right? We looked at each of these in great detail and then whipped through the shapes to demonstrate how the concepts come together. <strong>It\u2019s not so much about memorizing snippets than it is thoroughly understanding how CSS works<\/strong> and leveraging its features to produce any number of things, like shapes.<\/p>\n<p>Don\u2019t forget to bookmark my <a href=\"https:\/\/css-shape.com\/\">CSS Shape website<\/a> and use it as a reference as well as a quick stop to get a specific shape you need for a project. I avoid re-inventing the wheel in my work, and the online collection is your wheel for snagging shapes made with pure CSS.<\/p>\n<p>Please also use it as inspiration for your own shape-shifting experiments. And post a comment if you think of a shape that would be a nice addition to the collection.<\/p>\n<h3 id=\"references\">References<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/verpex.com\/blog\/website-tips\/css-shapes-polygon-starburst\">CSS Shapes: Polygon &amp; Starburst<\/a>\u201d (Verpex Blog)<\/li>\n<li>\u201c<a href=\"https:\/\/verpex.com\/blog\/website-tips\/css-tricks-to-master-the-clip-path-property\">CSS Tricks To Master The <code>clip-path<\/code> Property<\/a>\u201d (Verpex Blog)<\/li>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/css-borders-using-masks\/\">Fancy CSS Borders Using Masks<\/a>\u201d (CSS-Tricks)<\/li>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/how-to-create-wavy-shapes-patterns-in-css\/\">How to Create Wavy Shapes &amp; Patterns in CSS<\/a>\u201d (CSS-Tricks)<\/li>\n<li>\u201c<a href=\"https:\/\/verpex.com\/blog\/website-tips\/css-shapes-the-triangle\">CSS Shapes: The Triangle<\/a>\u201d (Verpex Blog)<\/li>\n<li>\u201c<a href=\"https:\/\/verpex.com\/blog\/website-tips\/css-shapes-the-heart\">CSS Shapes: The Heart<\/a>\u201d (Verpex Blog)<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/11\/css-responsive-multi-line-ribbon-shapes-part1\/\">CSS Responsive Multi-Line Ribbon Shapes, Part 1<\/a>\u201d (Smashing Magazine)<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/11\/css-responsive-multi-line-ribbon-shapes-part2\/\">CSS Responsive Multi-Line Ribbon Shapes, Part 2<\/a>\u201d (Smashing Magazine)<\/li>\n<li>\u201c<a href=\"https:\/\/verpex.com\/blog\/website-tips\/css-shapes-the-ribbon\">CSS Shapes: The Ribbon<\/a>\u201d (Verpex Blog)<\/li>\n<li>\u201c<a href=\"https:\/\/www.sitepoint.com\/css-ribbons-single-element\/\">How to Create CSS Ribbon Shapes with a Single Element<\/a>\u201d (SitePoint)<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2024\/03\/modern-css-tooltips-speech-bubbles-part1\/\">Modern CSS Tooltips And Speech Bubbles, Part 1<\/a>\u201d (Smashing Magazine)<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2024\/03\/modern-css-tooltips-speech-bubbles-part2\/\">Modern CSS Tooltips And Speech Bubbles, Part 2<\/a>\u201d (Smashing Magazine)<\/li>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/cut-corners-using-css-mask-and-clip-path-properties\/\">Tricks to Cut Corners Using CSS Mask and Clip-Path Properties<\/a>\u201d<\/li>\n<li>\u201c<a href=\"https:\/\/www.freecodecamp.org\/news\/section-divider-using-css\/\">How to Create a Section Divider Using CSS<\/a>\u201d (freeCodeCamp Blog)<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/09\/re-creating-pop-out-hover-effect-css-part1\/\">Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 1)<\/a>\u201d (Smashing Magazine)<\/li>\n<li>\u201c<a href=\"https:\/\/frontendmasters.com\/blog\/creating-flower-shapes-using-css-mask-trigonometric-functions\/\">Creating Flower Shapes using CSS Mask &amp; Trigonometric Functions<\/a>\u201d (Frontend Masters)<\/li>\n<li>\u201c<a href=\"https:\/\/frontendmasters.com\/blog\/creating-wavy-circles-with-fancy-animations\/\">Creating Wavy Circles with Fancy Animations in CSS<\/a>\u201d (Frontend Masters)<\/li>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/mask-compositing-the-crash-course\/\">Mask Compositing: The Crash Course<\/a>\u201d by Ana Tudor (CSS-Tricks)<\/li>\n<\/ul>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" \/><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>The Modern Guide For Making CSS Shapes The Modern Guide For Making CSS Shapes Temani Afif 2024-05-10T13:00:00+00:00 2024-06-12T20:05:40+00:00 You have for sure googled \u201chow to create [shape_name] with CSS\u201d at<\/p>\n<p class=\"more-link\"><a href=\"http:\/\/sobre-portugal.com\/index.php\/2024\/05\/10\/the-modern-guide-for-making-css-shapes\/\" class=\"readmore\">Continue reading<svg class=\"icon icon-arrow-right\" aria-hidden=\"true\" role=\"img\"> <use href=\"#icon-arrow-right\" xlink:href=\"#icon-arrow-right\"><\/use> <\/svg><span class=\"screen-reader-text\">The Modern Guide For Making CSS Shapes<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":351,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"_links":{"self":[{"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/posts\/347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/comments?post=347"}],"version-history":[{"count":2,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/posts\/347\/revisions"}],"predecessor-version":[{"id":352,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/posts\/347\/revisions\/352"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/media\/351"}],"wp:attachment":[{"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/media?parent=347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/categories?post=347"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/tags?post=347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}