带角度的 CSS 菱形 (120, 60, 120, 60)答案

【问题标题】：CSS Rhombus with angles (120, 60, 120, 60)带角度的 CSS 菱形 (120, 60, 120, 60)
【发布时间】：2018-12-24 20:01:57
【问题描述】：

是否可以用纯 CSS 创建一个 120 度和 60 度对角的菱形形状？

【问题讨论】：

是的。看clip-path。
CSS transform 函数的某种组合（即rotate 和skew）可能会起作用。

标签： css css-shapes

【解决方案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>

为确保角度相同，请考虑保持 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>

同样的想法，但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>

如果你想要一些边框，你可以调整渐变：

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

【讨论】：

我需要它作为一种形状，而不是两种形状的组合。
@Vivendo 你在哪里看到 2 个形状？
有没有办法让菱形变宽？
忽略最后一条评论，您的做法非常完美，谢谢！没有背景有什么办法吗？
@Vivendo 喜欢什么？您可以使用 SVG，但您说的是纯 CSS，因此您可以考虑背景（这是他最容易控制且也受支持的方法），或者我们可以使用转换（不易处理）或剪辑路径（并非所有地方都支持）。但最后你需要着色，所以你肯定会使用背景（或者可能是边框）

【解决方案2】：

我用CSS Triangle Maker 做了两个√3/2 三角形:) 这是你想要的。

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

【讨论】：