Overview

Squares

Fixed

200x200 

.square {
    height: 200px;
    width: 200px;
}

Responsive

50%x50% 

.responsive-square {
    width: 50%;
}

.responsive-square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

Circles

Fixed

200x200 

.circle {
    height: 200px;
    width: 200px;
    border-radius: 50%;
}

Responsive

50%x50% 

.responsive-circle {
    width: 50%;
    border-radius: 50%;
}

.responsive-circle:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

Ovals

Fixed

200x100 

.oval {
    height: 100px;
    width: 200px;
    border-radius: 50%;
}

Responsive

1:2 Ratio 

.responsive-oval {
    width: 50%;
    border-radius: 50%;
}

.responsive-oval:after {
    content: "";
    display: block;
    padding-bottom: 50%;
}

Trapezoid

200x100 

.trapezoid {
    border-bottom: 100px solid #6f42c1;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    height: 0;
    width: 200px;
}

Rectangles

Aspect Ratios (classes taken from Bootstrap 5)

1x1
4x3
16x9
21x9

<div class="ratio ratio-1x1"></div>

<div class="ratio ratio-4x3"></div>

<div class="ratio ratio-16x9"></div>

<div class="ratio ratio-21x9"></div>

Parallelograms

Parallelogram

.parallelogram {
    width: 200px;
    height: 100px;
    transform: skew(20deg);
}

Triangles

Up, right, down, left

.triangle {
    width: 0;
    height: 0;
}

.triangle-up {
    border-left: 2rem solid transparent;
    border-right: 2rem solid transparent;
    border-bottom: 4rem solid #6f42c1;
}

.triangle-right {
    border-top: 2rem solid transparent;
    border-left: 4rem solid #6f42c1;
    border-bottom: 2rem solid transparent
}

.triangle-down {
    border-left: 2rem solid transparent;
    border-right: 2rem solid transparent;
    border-top: 4rem solid #6f42c1;
}

.triangle-left {
    border-left: 2rem solid transparent;
    border-right: 2rem solid transparent;
    border-top: 4rem solid #6f42c1;
}

.triangle-upright {
    border-top: 4rem solid #6f42c1;
    border-left: 4rem solid transparent;
}

.triangle-bottomright {
    border-bottom: 4rem solid #6f42c1;
    border-left: 4rem solid transparent;
}

.triangle-bottomleft {
    border-bottom: 4rem solid #6f42c1;
    border-right: 4rem solid transparent;
}

.triangle-upleft {
    border-top: 4rem solid #6f42c1;
    border-right: 4rem solid transparent;
}

Stars

6 points
5 points

<div class='star star-6'></div>
<div class='star star-5'></div>

.star {
    width: 0;
    height: 0;
}

.star-6 {
    border-left: 4rem solid transparent;
    border-right: 4rem solid transparent;
    border-bottom: 6rem solid #6f42c1;
}

.star-5 {
    transform: rotate(35deg);
    border-right: 100px solid transparent;
    border-bottom: 70px solid #6f42c1;
    border-left: 100px solid transparent;
  }

  .star:after, .star:before {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    display: block;
  }

  .star-6:after {
    border-left: 4rem solid transparent;
    border-right: 4rem solid transparent;
    border-top: 6rem solid #6f42c1;
    top: 2rem;
    left: -4rem;
  }

  .star-5:before {
      border-bottom: 80px solid #6f42c1;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      top: -45px;
      left: -65px;
      transform: rotate(-35deg);
  }

  .star-5:after {
    top: 3px;
    left: -105px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #6f42c1;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
  }

Reference