Creating Diamond using HTML and CSS

Salow
December 11, 2021
CSS, Shape

In most games the reward system is given in the form of Diamonds one of the best example is Free Fire Diamond. Which allows buying in-game items such as characters, items, emotes etc., We will creating Diamond using CSS and HTML.

CSS Properties Definitions

The border-style property specifies the border style.
The border-color property specifies color of the border.
The border-width property specifies the width of the border.
The position is set as relative.

Code Block

Here is the code for designing the top portion of the diamond.

.diamond {
        border-style: solid;
        border-color: transparent transparent #99d3ff transparent;
        border-width: 0 25px 25px 25px;
        height: 0;
        width: 50px;
        box-sizing: content-box;
        position: relative;
        margin: 20px 0 50px 0;
      }

The output looks like the following:

The following code is for designing the bottom half.

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

.diamond:after {
        content: "";
        position: absolute;
        top: 25px;
        left: -25px;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: #99d3ff transparent transparent transparent;
        border-width: 70px 50px 0 50px;
      }

The complete diamond looks like this!