Home / Articles / Programming languages / Markup languages / HTML & CSS / How to draw a diamond using only CSS

How to draw a diamond using only CSS

How to draw a diamond using only CSS
 
How to draw a diamond using only CSS
  • Currently 4 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 4/5 (1 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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


 

Read also

How to draw stars using only CSS

How to draw stars using only CSS

How to draw a heart using only CSS

How to draw a heart using only CSS

Discussion (total 1 comments)

Bruno Bezerra
Bruno Bezerra
June 13, 2014 at 08:29 am
I like this effect, very dynamic!

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation