How to draw a diamond using only CSS

The current article is intended for demonstration purposes and shows how to simply draw a diamond using only CSS.

All styles of the diamond shown below are applied to one div element.

The diamond consists of two figures: trapezium and triangle which have the same color. These figures are the changed shapes of blocks such as: div element and its pseudo-element before. The div element has a shape of trapezium and the shape of pseudo-element before is a triangle. All these blocks form their shapes using a hack that is based on different values for border CSS property. Using this hack, different triangles and trapeziums can be created.

CSS styles:

div {
  border-style: solid;
  border-color: transparent transparent #00FEFD transparent;
  border-width: 0 25px 30px 25px;
  height: 0;
  position: relative;
  width: 90px;
}

div:before {
  content: "";
  border-color: #00FEFD transparent transparent transparent;
  border-style: solid;
  border-width: 100px 70px 0 70px;
  height: 0;
  left: -25px;
  position: absolute;
  top: 30px;
  width: 0;
}

Live demo

To see the structure of the diamond, change the color of any of the figures. Let's change the color of the triangle adding the following CSS styles to the ones above:

div:before {
  border-top-color: red;
}

Live demo