10 Super easy CSS Shapes for beginners

This content originally appeared on DEV Community and was authored by MD JUNAID ALAM

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.

This content originally appeared on DEV Community and was authored by MD JUNAID ALAM

Print Share Comment Cite Upload Translate Updates

APA

MD JUNAID ALAM | Sciencx (2021-08-05T08:23:32+00:00) 10 Super easy CSS Shapes for beginners. Retrieved from https://www.scien.cx/2021/08/05/10-super-easy-css-shapes-for-beginners/

MLA

" » 10 Super easy CSS Shapes for beginners." MD JUNAID ALAM | Sciencx - Thursday August 5, 2021, https://www.scien.cx/2021/08/05/10-super-easy-css-shapes-for-beginners/

HARVARD

MD JUNAID ALAM | Sciencx Thursday August 5, 2021 » 10 Super easy CSS Shapes for beginners., viewed ,<https://www.scien.cx/2021/08/05/10-super-easy-css-shapes-for-beginners/>

VANCOUVER

MD JUNAID ALAM | Sciencx - » 10 Super easy CSS Shapes for beginners. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/05/10-super-easy-css-shapes-for-beginners/

CHICAGO

" » 10 Super easy CSS Shapes for beginners." MD JUNAID ALAM | Sciencx - Accessed . https://www.scien.cx/2021/08/05/10-super-easy-css-shapes-for-beginners/

IEEE

" » 10 Super easy CSS Shapes for beginners." MD JUNAID ALAM | Sciencx [Online]. Available: https://www.scien.cx/2021/08/05/10-super-easy-css-shapes-for-beginners/. [Accessed: ]

rf:citation

» 10 Super easy CSS Shapes for beginners | MD JUNAID ALAM | Sciencx | https://www.scien.cx/2021/08/05/10-super-easy-css-shapes-for-beginners/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.