DEV Community

Cover image for CSS Shapes - Other shapes
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

CSS Shapes - Other shapes

So far we have gone through some basic CSS shapes, and triangles in CSS.
Today we'll be focussing on some cool other shapes.

The shapes that will be covered in this article are the following:

Trapezoid in CSS

The first shape we'll be looking at today is the Trapezoid. It's basically a warped rectangle.
And we can actually create this by leveraging the borders as we've seen with the CSS Triangles.

.trapezoid {
  border-bottom: 100px solid #3e92cc;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 150px;
}
Enter fullscreen mode Exit fullscreen mode

That will give us the following result:

Trapezoid shape in CSS

Parallelogram in CSS

Now onto the parallelogram, which is another rectangle but skewed a specific way, and that's exactly how to create this shape.

.parallelogram {
  width: 200px;
  height: 100px;
  transform: skew(20deg);
  background: #3e92cc;
}
Enter fullscreen mode Exit fullscreen mode

With that, we get the following result.

Parallelogram in CSS

Hexagon in CSS

Another cool shape we can create is the hexagon. A six-pointed element, and although it sounds easy, it has quite the challenge to it.

For our example, we use a rectangle and use CSS pseudo-elements to add the top and bottom triangles to it.

.hexagon {
  width: 90px;
  height: 50px;
  background: #3e92cc;
  position: relative;
}
.hexagon::before {
  content: '';
  position: absolute;
  top: -25px;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-bottom: 25px solid #3e92cc;
}
.hexagon::after {
  content: '';
  position: absolute;
  bottom: -25px;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-top: 25px solid #3e92cc;
}
Enter fullscreen mode Exit fullscreen mode

And that will give us this result:

Hexagon shape in CSS

Egg in CSS

And for one of my favorites, the egg!
It's quite simple to create as we use the ellipsis but adjust it a bit.

.egg {
  display: block;
  width: 100px;
  height: 130px;
  background-color: #3e92cc;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Enter fullscreen mode Exit fullscreen mode

And we get this cool-looking egg.

Egg shape in CSS

Demonstration of CSS Shapes

As usual, you can try these shapes on the following Codepen, try to make some adjustments, and see what happens.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (5)

Collapse
 
kalashin1 profile image
Kinanee Samson

Never knew how to make parallelogram and hexagon in without the clip path, but i just learnt something new.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Awesome, clip-path is very cool, but can get quite difficult to maintain and scale I found.

Collapse
 
kalashin1 profile image
Kinanee Samson

How do you mean? I haven't experienced any difficulties using clip path

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

I don't know, personally just struggle with it, but might be because I grew up without it haha.

Thread Thread
 
kalashin1 profile image
Kinanee Samson

😂😂, you're sick