Creating Diamond using HTML and CSS

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!

Video Tutorial

You can find the complete coding  tutorial in the following YouTube Video

Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!