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; }
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; }