CSS ромб с углами (120, 60, 120, 60)

Question

Можно ли создать форму ромба с чистым CSS с противоположными углами в 120 градусов и 60 градусов?

Answer 1

Простой фон с градиентом, который можно легко настроить, используя ширину / высоту элемента для управления углами и размерами:

.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>

Если вы хотите какую-то рамку, вы можете настроить градиент:

.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;  /* 2*sin(120/2)*150 = 260 */
  height:150px; /* 2*sin(60/2)*150  = 150 */
  display:inline-block;
  margin:5px;
}

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

Answer 2

я сделал два √3 / 2 треугольника с CSS Triangle Maker :) это вам нужно.

.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>