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?

Rhombus image

Yes. Look at [`clip-path`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path). — yaakov, Dec 24 '18 at 20:14
Some combination of CSS `transform` functions (i.e. `rotate` and `skew`) might work. — Nate Whittaker, Dec 24 '18 at 20:26

Temani Afif · Accepted Answer · 2019-11-26T11:24:41.707

4

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>

edited Nov 26 '19 at 11:24

answered Dec 24 '18 at 20:36

Temani Afif

245,468
26
309
415

I need it as one shape, not 2 shapes combined. – Vivendo Dec 24 '18 at 21:02
@Vivendo where you see 2 shapes? – Temani Afif Dec 24 '18 at 21:03
Is there a way to make the rhombus wider? – Vivendo Dec 24 '18 at 21:06
Ignore that last comment, the way you did it is perfect thanks! Is there any way to do it without a background? – Vivendo Dec 24 '18 at 21:08
@Vivendo like what? you can do with SVG but you said pure CSS, so either you consider background (which is he easiest way to control and also supported) or we can do with transformation (not easy to handle) or clip-path (not supported everywhere). But at the end you will need coloration so you will use background for sure (or probably borders) – Temani Afif Dec 24 '18 at 21:10
Is there any way to do this with html/css/javascript? I want a Rhombus object which can be lined next to each other to create a pattern. – Vivendo Dec 24 '18 at 21:17
@Vivendo you already have one now :) simply add more and position them like you want. what is the issue then? – Temani Afif Dec 24 '18 at 21:18
The issue is, the object is a "square" so when you add a :hover with a border you'll see what I mean – Vivendo Dec 24 '18 at 21:21
@Vivendo you didn't add any of these details with your question, we cannot know this. You said you want the shape, so we made the shape ... if you have more requirements you need to add ALL of them within the quesition to get accurate answers. Don't hurry writing a fast question, take the time to add all the needed details to avoid getting *partial* answer and to also avoid wasting time making them – Temani Afif Dec 24 '18 at 21:24
You are right. Sorry, the other things were surplus to requirements, but you have answered the original question for that I will mark it as correct :) – Vivendo Dec 24 '18 at 21:28
@Vivendo don't be sorry, simply make it more clear for us ;) you can edit your question or either ask a new one with your new requirements and we will always help you. – Temani Afif Dec 24 '18 at 21:30
I might have known... ;) – yaakov Dec 25 '18 at 03:15
@TemaniAfif Great answer! I have a follow up here - How can I create a similar rhombus but with smoother edges ( i.e. with a border-radius ) . Please let me know if you want me to create a separate question or this. – Veryon890 Sep 03 '21 at 07:30
@Veryon890 check this answer: https://stackoverflow.com/a/65485455/8620333 – Temani Afif Sep 03 '21 at 08:24
@TemaniAfif thanks, but looks like it uses svg, I was just checking if it's possible without svgs and plain CSS to achieve this : https://lh3.googleusercontent.com/QdsRbbmvyqvIxojK4GehdCTrzkWaIBTvTRL1fufWGNz0J1T63V-4dV22YYSHXRPFkDX5zl6hV4pgCFxPJvTPusBaXMYTR-60ER8rNw=w1064-v0 – Veryon890 Sep 03 '21 at 08:30
@Veryon890 you will have a lot of headaches with a CSS only solution – Temani Afif Sep 03 '21 at 08:31
@TemaniAfif yeah looks like it. Thanks anyhow! – Veryon890 Sep 03 '21 at 09:03

score 0 · Answer 2 · edited Dec 24 '18 at 21:07

i made two √3/2 triangle with CSS Triangle Maker :) this is you to want.

.flex {
  display:flex;
}

.triangle1 {
  border: 0 solid transparent;
  border-top-width: 101px;
  border-bottom-width: 99px;
  border-right: 173px solid #ffa502;
}

.triangle2 {
  border: 0 solid transparent;
  border-bottom-width: 101px;
  border-top-width: 99px;
  border-left: 173px solid #ffa502;
}

<div class="flex">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
</div>

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

2 Answers2