10 Super easy CSS Shapes for beginners
Tags: css, beginners, webdev
Published: 2021-08-05 08:23:32

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmow6edzzitp0kosw5vd.png)
 


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

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



## 2. Rectangle

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bepzoskthk9ocn0c677x.png)
 

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

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


## 3. Rounded Rectangle

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dn4d3l1twxuccej9alul.png)
 

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

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


## 4. Circle

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6a3pwhm3ma5i4v4vny72.png)
 

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

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


## 5. Oval

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkre9j6xyuj739q9q94t.png)
 

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

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



## 6. Half Circle

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66d9rphpzb22a6qfdlqt.png)
 

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

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


## 7. Triangle

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35botbjje3vdplm7yx5j.png)
 

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

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


## 8. Cone

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7jlqpisvwghiugitqp8.png)
 

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

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



## 9. Heart

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y55k1qwxj34vy4strh7g.png)
 

```
<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


![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ve9ir3k4ch9rojii6vvz.png)
 

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