HOW to create different shapes with CSS?

/ Code, CSS, How To, HTML / By Malay Ladu

Here’s how you can create different shapes using CSS

1. Square

.square {
  height: 50px;
  width: 50px;
  background-color: #3949AB;
}

2. Circle

.circle {
  height: 50px;
  width: 50px;
  background-color: #3949AB;
  border-radius: 50%;
}

3. Oval

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

4. Trapezoid

.trapezoid {
    border-bottom: 50px solid #3949AB;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    height: 0;
    width: 125px;
}

5. Rectangle

.rectangle {
  height: 50px;
  width: 100px;
  background-color: #3949AB;
}

6. Parallelogram

.parallelogram {
    width: 100px;
    height: 50px;
    transform: skew(20deg);
    background: #3949AB;
}

7. Triangle Up

.triangle-up {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid #3949AB;
}

8. Triangle Down

.triangle-down {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid #3949AB;
}

9. Triangle Left

.triangle-left {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-right: 50px solid #3949AB;
    border-bottom: 25px solid transparent;
}

10. Triangle Right

.triangle-right {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid #3949AB;
    border-bottom: 25px solid transparent;
}

Here’s the full HTML code to check

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.square {
  height: 50px;
  width: 50px;
  background-color: #3949AB;
}

.circle {
  height: 50px;
  width: 50px;
  background-color: #3949AB;
  border-radius: 50%;
}

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

.trapezoid {
    border-bottom: 50px solid #3949AB;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    height: 0;
    width: 125px;
}

.rectangle {
  height: 50px;
  width: 100px;
  background-color: #3949AB;
}

.parallelogram {
    width: 100px;
    height: 50px;
    transform: skew(20deg);
    background: #3949AB;
}

.triangle-up {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid #3949AB;
}

.triangle-down {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid #3949AB;
}

.triangle-left {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-right: 50px solid #3949AB;
    border-bottom: 25px solid transparent;
}

.triangle-right {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid #3949AB;
    border-bottom: 25px solid transparent;
}

</style>
</head>
<body>

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

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

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

<h2>Trapezoid</h2>
<div class="trapezoid "></div>

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

<h2>Parallelogram</h2>
<div class="parallelogram"></div>

<h2>Triangle Up</h2>
<div class="triangle-up"></div>

<h2>Triangle Down</h2>
<div class="triangle-down"></div>

<h2>Triangle Left</h2>
<div class="triangle-left"></div>

<h2>Triangle Right</h2>
<div class="triangle-right"></div>


</body>
</html>