带有部分填充的CSS三角形

Question

我想创建一个有两种颜色的三角形（最好使用纯CSS方法）。三角形可以填充到一定高度，这必须在网站上动态完成，因为三角形代表设备的速度。我想完成以下结果：

三角形的黄色部分需要调整。 （我不介意使用jQuery来使用CSS，但使用图像是不行的）。我设法使用＆＃39; border-method＆＃39;创建了一个三角形。并且我已经设法使用背景线性渐变来部分填充正方形，但两者的组合被证明是一个相当大的挑战。

.arrowLeft{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 100px;
    border-color: transparent transparent transparent #5f5f5f;
    float:left;
}

有人有关于如何解决我的问题的建议吗？

Answer 1

您可以创建两个三角形，然后相对定位：

.arrowContainer{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 100px;
    border-color: transparent transparent transparent #5f5f5f;
    position: relative;
}

.arrowContainer .arrowLeft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 12px 80px;
    border-color: transparent transparent transparent red;
    position: absolute;
    right: 0;
    top: -11px;
}

<div class="arrowContainer">
  <div class="arrowLeft"></div>
</div>

Answer 2

您可以使用边框创建三角形形状，并使用z-index方法将灰色和橙色div放在其后面：https://jsfiddle.net/62yj9wn5/

HTML：

<div class="triangle">
  <div class="vshape">
  </div>
  <div class="orange">
    <div class="gray">
    </div>
  </div>
</div>

的CSS：

html, body {background-color: black}

.orange {
  background-color: orange;
  width: 50px;
  height: 120px;
  position: relative;
  margin: -120px 0 0 0px;
  z-index: 1;
}
.gray {
  background-color: gray;
  width: 50px;
  // change the hight dynamically 
  height: 50px;
  }
.vshape{
  width:0px;
  height: 0px;
  border-style: solid;
  border-width: 120px 25px 0 25px;
  border-color: transparent black transparent black;
  position: relative;
  z-index: 2;
}

如果将对象相乘并将其旋转到＆＃34;其他＆＃34;您可以轻松地重复使用这些类。 3个方向。