CSS - Pentagon

An example of HTML and CSS code to create a pentagon shape.

The HTML element has a <div> tag with class name "pentagon" to make it the pentagon shape element.

<div class="pentagon"></div>

This code example uses CSS custom properties to calculate the values needed to shape the pentagon.
The base width value "--w" is specified to compute all necessary dimensions.

The upper and lower parts are colored differently to visualize the individual shapes.

.pentagon {
  position: relative;
  --w: 300px; /* base Size */
  --h: calc(var(--w) * 0.952);
  width: var(--w);
  height: var(--h);
  box-sizing: border-box;
}

.pentagon::before {
  content: "";
  position: absolute;
  width: var(--w);
  height: calc(var(--h) * 0.38);
  border-left: calc(var(--w) * 0.5) solid transparent;
  border-right: calc(var(--w) * 0.5) solid transparent;
  border-bottom: calc(var(--h) * 0.38) solid #00bfff;
  box-sizing: border-box;
}

.pentagon::after {
  content: "";
  position: absolute;
  top: calc(var(--h) * 0.38);
  width: var(--w);
  height: calc(var(--h) * 0.62);
  border-top: calc(var(--h) * 0.62) solid #4169e1;
  border-left: calc(var(--w) * 0.19) solid transparent; 
  border-right: calc(var(--w) * 0.19) solid transparent;
  box-sizing: border-box;
}