DEV Community

loading...
Cover image for 10 Super easy CSS Shapes for beginners

10 Super easy CSS Shapes for beginners

MD JUNAID ALAM
Front End Developer
Updated on ・2 min read

Hello there,

In this post we will be talking about creating basic shapes in HTML & CSS. Many beginners face issues while working with CSS, so I have got 10 CSS shapes that we can create easily.

So, without further delay. Let's Begin.

1. Square

image

<div class="square"></div>
Enter fullscreen mode Exit fullscreen mode
.square {
  height: 100px;
  width: 100px;
  background-color: #d1bb03;
}
Enter fullscreen mode Exit fullscreen mode

2. Rectangle

image

<div class="rectangle"></div>
Enter fullscreen mode Exit fullscreen mode
.rectangle {
  height: 100px;
  width: 150px;
  background-color: #d11bbb;
}
Enter fullscreen mode Exit fullscreen mode

3. Rounded Rectangle

image

<div class="rounded-rectangle"></div>
Enter fullscreen mode Exit fullscreen mode
.rounded-rectangle {
  height: 100px;
  width: 150px;
  border-radius: 25px;
  background-color: #0fbd9c;
}
Enter fullscreen mode Exit fullscreen mode

4. Circle

image

<div class="circle"></div>
Enter fullscreen mode Exit fullscreen mode
.circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: #00a913;
}
Enter fullscreen mode Exit fullscreen mode

5. Oval

image

<div class="oval"></div>
Enter fullscreen mode Exit fullscreen mode
.oval {
  height: 100px;
  width: 150px;
  border-radius: 50%;
  background-color: #f95670;
}
Enter fullscreen mode Exit fullscreen mode

6. Half Circle

image

<div class="half-circle"></div>
Enter fullscreen mode Exit fullscreen mode
.half-circle {
  height: 75px;
  width: 150px;
  background-color: #cdef00;
  border-radius: 50% /100% 100% 0 0;
}
Enter fullscreen mode Exit fullscreen mode

7. Triangle

image

<div class="triangle"></div>
Enter fullscreen mode Exit fullscreen mode
.triangle {
  height: 0;
  width: 0;
  border: 50px solid transparent;
  border-bottom: 100px solid #252aff;
}
Enter fullscreen mode Exit fullscreen mode

8. Cone

image

<div class="cone"></div>
Enter fullscreen mode Exit fullscreen mode
.cone {
  height: 0;
  width: 0;
  border: 50px solid transparent;
  border-bottom: 100px solid #27aaff;
  border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

9. Heart

image

<div class="heart"></div>
Enter fullscreen mode Exit fullscreen mode
.heart {
  height: 60px;
  width: 60px;
  background-color: #c51a08;
  transform: rotate(45deg);
  position: relative;
}
.heart::before, .heart::after {
  content: '';
  background-color: inherit;
  height: inherit;
  width: inherit;
  display: block;
  position: absolute;
  border-radius: 50%;
}

.heart::before{
  bottom: 30px;
}
.heart::after {
  right: 30px;
}
Enter fullscreen mode Exit fullscreen mode

10. Callout

image

<div class="callout"></div>
Enter fullscreen mode Exit fullscreen mode
.callout {
  height: 80px;
  width: 150px;
  background-color: #660077;
  border-radius: 10px;
  position: relative;
}
.callout::after {
  content: '';
  border: 15px solid transparent;
  border-top: 30px solid #660077;
  position: absolute;
  bottom: -30px;
  right: 0px;
}
Enter fullscreen mode Exit fullscreen mode

Feel free to add your thoughts in comments.

Discussion (5)

Collapse
afif profile image
Temani Afif

I advise you to take a look at clip-path especially when it comes to triangular shapes. It's more efficient than using the border hack. Unfortunately, the very old articles are well referenced in google and people always get the old ways to draw shapes when searching google.

Collapse
link2twenty profile image
Andrew Bone

I think clip-path has a little way to go before it's really responsive though, I don't think it would be possible, unless I'm mistaken, to stretch the body of a speech bubble without stretching its tab.

Collapse
afif profile image
Temani Afif

Reponsive is indeed another argument to use clip-path. With border you have no way to consider percentage value while with clip-path you can either use fixed value to do the same thing you do with border or use percetange values

That speech bubble can be done like below:
jsfiddle.net/jmvt6a52/
jsfiddle.net/jmvt6a52/2/ (need few more hack for the radius)
In both cases, you can adjust the size of the element without stretching the tab.

Thread Thread
link2twenty profile image
Andrew Bone

If I were not supporting IE (and that day is coming) I would use version 1. That's basically I what I do do but with the triangle hack.

Collapse
metajunaid profile image
MD JUNAID ALAM Author

Thanks @afif for adding your thoughts. I agree with you.