CSS Art – How to Make Advanced Shapes with clip-path
Make any shape you can imagine with CSS clip-path. In this article let’s make stars, triangles, circles and even letters step-by-step.
Introduction
CSS has many tools to make shapes. We will show you how to make advanced shapes using CSS clip-path in this article.
With clip-path
you can make basic shapes such as circles, squares, ellipses, and rectangles.
Using clip-path
polygon() function you can make triangles, stars, even letters of the alphabet. The polygon()
function gives you flexibility to create any shape you can imagine.
Preview
Here is a quick preview of what we’ll be creating step-by-step.
Basic Shapes

Similar to the square pictured above, we will be creating basic shapes using clip-path
.
- Rectangle
- Circle
- Ellipse
Advanced Shapes using polygon()

After you’re comfortable creating the basic shapes, we’ll tackle advanced shapes using the polygon()
function.
- Star
- Letter
X
- Triangle
Prerequisites
We don’t assume prior knowledge of CSS or HTML, but it helps if you have some familiarity with how they work. Jump over to this article if you require an HTML and CSS primer.
We assume that you have set up tools to create CSS art. If you haven’t, this article will show you how to set them up.
HTML Structure
Here’s HTML code for our examples.
<!-- clip-path Basic Shapes -->
<div class="container">
<div class="clip-path-inset-square"></div>
</div>
<div class="container">
<div class="clip-path-inset-rectangle"></div>
</div>
<div class="container">
<div class="clip-path-circle"></div>
</div>
<div class="container">
<div class="clip-path-ellipse"></div>
</div>
<!-- clip-path Advanced Shapes using polygon() -->
<div class="container">
<div class="clip-path-polygon-triangle"></div>
</div>
<div class="container">
<div class="clip-path-polygon-x"></div>
</div>
<div class="container">
<div class="clip-path-polygon-star"></div>
</div>
A container
class encloses each shape example.
For reference, here’s the CSS code for the container
class.
/* Body and Container Settings */
/* Center shapes */
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* Set blue background and light gray border */
.container {
width: 500px;
height: 450px;
border: 5px solid lightgray;
background: royalblue;
position: relative;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
}
Please have no hesitation to change the background color, border color to the color of your choice.
Are you ready to start building shapes with clip-path
?
Let’s start with basic shapes in the next section.
Basic Shapes
Basic shapes are the fundamental building blocks for creating CSS art. Let’s go through a couple of examples on how to create basic shapes using CSS clip-path
.
Square
Square shape is our first example.
CSS Code:
.clip-path-inset-square {
width: 250px;
height: 250px;
background-color: burlywood;
clip-path: inset(0% 0% 0% 0% round 10%);
}

Let’s break down the square shape CSS code.
width
andheight
Thewidth
andheight
CSS properties will determine the size of the shape. For squares, you want both values to be the same, for this example we set it to250px
.clip-path: inset(0% 0% 0% 0% round 10%)
Directly after theclip-path:
property, we type inset(). The first four arguments are length values.
For this example, we set it to0%
. When you set all four arguments, it corresponds to top, right, bottom and left offset from the reference box inward.
The position of the edges will be defined by the values we set, making the inset square bigger or smaller. Changing each argument, you can make each side of the shape change it’s length.
The optionalround 10%
argument gives us the rounded corners. It is a shorthand syntax for CSS border-radius.
Next, let’s see how we can make a rectangle.
Rectangle
You can consider rectangles as elongated squares. It can be elongated horizontally like our example below. It can be elongated vertically as well.
CSS Code:
.clip-path-inset-rectangle {
width: 400px;
height: 250px;
background-color: burlywood;
clip-path: inset(0% 0% 0% 0% round 5%);
}

- We set the rectangle’s shape with
width: 400px;
andheight: 250px;
. If you reverse the property values, you will get a vertically elongated rectangle. clip-path: inset(0% 0% 0% 0% round 5%);
Similar to the square shape, we gave the rectangle rounded corners. Removinground 5%
will result in a rectangle with sharp corners.- As with the square example, we can change the
inset()
values to control the length of each rectangle’s sides.
Up next, circles, and ellipses.
Circle
In this example, we’ll make a basic circle shape.
CSS Code:
.clip-path-circle {
width: 250px;
height: 250px;
background-color: burlywood;
clip-path: circle(50%);
}

- Similar to a square, the
width
andheight
value property should be the same to produce a circle. clip-path: circle(50%);
The50%
argument controls the circle shape radius. You can increase or decrease the size of the circle by changing the value of the radius.
We did not assign a position value. Hence, our circle is centered, which is the default. You can use keywords such asat top left
to make quarter circles.
For reference here’s a non exhaustive list of position values you can use.center
left
center top
right 8.5%
bottom 12vmin right -6px
10% 20%
8rem 14px
Here’s a great article from Mozilla Developer Network (MDN) about position values.
Ellipse
Let’s make an ellipse in this example.
CSS Code:
.clip-path-ellipse {
width: 350px;
height: 350px;
background-color: burlywood;
clip-path: ellipse(50% 30% at center);
}

clip-path: ellipse(50% 30% at center);
An ellipse is essentially a squashed circle.
You control the shape of the ellipse by setting two radii, x and y, in that order. In this example,50%
will be our x radius and30%
is our y radius.
If you reduce the y radius, let’s say to10%
, it will result to a very flat ellipse. For the reverse where you reduce the x radius,50%
, to a lower number will result in a vertically elongate ellipse.- We positioned the ellipse in the center with
at center
.
We are finished with basic shapes. In the next section, we’ll explore advanced shapes using polygon()
function.
