10 Super easy CSS Shapes for beginners

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

<div class="square"></div>

.square {
  height: 100px;
  width: 100px;
  background-color: #d1bb03;
}

2. Rectangle

<div class="rectangle"></div>

.rectangle {
  height: 100px;
  width: 150px;
  background-color: #d11bbb;
}

3. Rounded Rectangle

<div class="rounded-rectangle"></div>

.rounded-rectangle {
  height: 100px;
  width: 150px;
  border-radius: 25px;
  background-color: #0fbd9c;
}

4. Circle

<div class="circle"></div>

.circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: #00a913;
}

5. Oval

<div class="oval"></div>

.oval {
  height: 100px;
  width: 150px;
  border-radius: 50%;
  background-color: #f95670;
}

6. Half Circle

<div class="half-circle"></div>

.half-circle {
  height: 75px;
  width: 150px;
  background-color: #cdef00;
  border-radius: 50% /100% 100% 0 0;
}

7. Triangle

<div class="triangle"></div>

.triangle {
  height: 0;
  width: 0;
  border: 50px solid transparent;
  border-bottom: 100px solid #252aff;
}

8. Cone

<div class="cone"></div>

.cone {
  height: 0;
  width: 0;
  border: 50px solid transparent;
  border-bottom: 100px solid #27aaff;
  border-radius: 50%;
}

9. Heart

<div class="heart"></div>

.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;
}

10. Callout

<div class="callout"></div>

.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;
}

Feel free to add your thoughts in comments.

Comments

[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.

[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.

[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.

[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.

[MD JUNAID ALAM]

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