部分的に塗りつぶされたCSS三角形

Question

2色の三角形（好ましくは純粋なCSSメソッドを使用）を作成したいと考えています。三角形は特定の高さまで塗りつぶすことができます。三角形はデバイスの速度を表すため、ウェブサイト上で動的に行わなければなりません。私は、次のような結果を達成したい：

三角形の黄色い部分は調整する必要があります。 （私はjQueryを使用してCSSをalceringしても構いませんが、画像の使用は無駄です）。私は 'border-method'を使って三角形を作成しましたが、私はバックグラウンドの線形グラデーションを使って部分的に四角形を塗りつぶしましたが、両方の組み合わせがかなりの難題であることが証明されています。

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

誰も私の問題を解決する方法についての提案はありますか？

Answer 1

あなたは比較的、2つの三角形と位置を作成することができます。

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

オブジェクトを乗算し、それを「その他」の3つの方向を回転させる場合は、簡単にそれらのクラスを再利用することができます。