CSS Rhombus with angles (120, 60, 120, 60)

Question

Is it possible to create a Rhombus shape with pure CSS with the angles at 120deg and 60deg opposites?

Answer 1

A simple background with gradient that you can easily adjust using width/height of the element to control the angles and dimensions:

.box {
  background:
   linear-gradient(to top right   ,orange 49.5%, transparent 50%) top right,
   linear-gradient(to top left    ,orange 49.5%, transparent 50%) top left,
   linear-gradient(to bottom right,orange 49.5%, transparent 50%) bottom right,
   linear-gradient(to bottom left ,orange 49.5%, transparent 50%) bottom left;
  background-size:50% 50%;
  background-repeat:no-repeat;
  
  width:260px;  /* 2*sin(120/2)*150 = 260 */
  height:150px; /* 2*sin(60/2)*150  = 150 OR 2*cos(120/2)*150  = 150*/
  display:inline-block;
  margin:5px;
}

<div class="box">
</div>
<div class="box" style="height:100px;">
</div>
<div class="box" style="width:200px;">
</div>

To make sure to keep the angle the same, consider maitaining an aspect ratio of your div:

.box {
  background:
   linear-gradient(to top right   ,orange 49.5%, transparent 50%) top right,
   linear-gradient(to top left    ,orange 49.5%, transparent 50%) top left,
   linear-gradient(to bottom right,orange 49.5%, transparent 50%) bottom right,
   linear-gradient(to bottom left ,orange 49.5%, transparent 50%) bottom left;
  background-size:50% 50%;
  background-repeat:no-repeat;
  
  width:260px;  
  display:inline-block;
  margin:5px;
}

/* 2*sin(120/2)*h = w 
   h = w / (sin(60)*2)
   h = w * 0.57736
*/
.box:before {
  content:"";
  display:block;
  padding-top:57.73%;
}

<div class="box">
</div>
<div class="box" style="width:150px;">
</div>
<div class="box" style="width:80px;">
</div>

The same idea but with clip-path

.box {
  background:orange;
  clip-path:polygon(0 50%, 50% 100%,100% 50%,50% 0);
  width:260px;  
  display:inline-block;
  margin:5px;
}

/* 2*sin(120/2)*h = w 
   h = w / (sin(60)*2)
   h = w * 0.57736
*/
.box:before {
  content:"";
  display:block;
  padding-top:57.73%;
}

<div class="box">
</div>
<div class="box" style="width:150px;">
</div>
<div class="box" style="width:80px;">
</div>

If you want some border you can adjust the gradient:

.box {
  --g:var(--c,orange) calc(49.5% - 3px),#000 calc(49.5% - 2px),#000 49.5%, transparent 50%;
  background:
   linear-gradient(to top right   ,var(--g)) top right,
   linear-gradient(to top left    ,var(--g)) top left,
   linear-gradient(to bottom right,var(--g)) bottom right,
   linear-gradient(to bottom left ,var(--g)) bottom left;
  background-size:50% 50%;
  background-repeat:no-repeat;
  
  width:260px; 
  display:inline-block;
  margin:5px;
}

/* 2*sin(120/2)*h = w 
   h = w / (sin(60)*2)
   h = w * 0.57736
*/
.box:before {
  content:"";
  display:block;
  padding-top:57.73%;
}

<div class="box">
</div>
<div class="box" style="--c:transparent;">
</div>