CSS - Trapezoid

Here is an example code for drawing a circle using HTML and CSS.

In HTML, the element that represents a trapezoid is a <div> with the class attribute set to "trapezoid".

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

By specifying "box-sizing: border-box," you can directly set the "width" and "height" to the width and height of the trapezoid.

This way, you can define the dimensions of the trapezoid without any additional calculations.

/* Trapezoid */
.trapezoid {
  --w: 300px; /* Base size */
  --angle: 0deg; /* Rotation */
  position: relative;
  width: var(--w);
  height: var(--w);
  transform: rotate(var(--angle));
}

.trapezoid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  width: 90%; /* Shape width */
  height: 90%; /* Shape height */
  border-bottom: calc(var(--w) / 2) solid silver; /* Trapezoid height */
  border-left: calc(var(--w) / 6) solid transparent; /* Left side bottom edge extension */
  border-right: calc(var(--w) / 6) solid transparent; /* Right side bottom edge extension */
  box-sizing: border-box;
}