親divのサイズを変更するとCSSの三角形/矢印が大きくなります

Question

これはCSSの三角形です。高さのパーセンテージを設定している親コンテナのサイズを変更すると、三角形のサイズも変更されます。

これが機能する以下の定義をどのように変更する必要がありますか？

一般的なCSSで動作しない場合は、CSS3でも開かれています。

.segmentTriangle{ 
    width: 0px; 
    height: 0px; 
    position: relative; 
    left: 0; 
    top: 0; 
    border-style: solid; 
    border-width: 20px 20px 0 0; 
    border-color: #000 transparent transparent transparent; 
} 

私のレイアウトの一部であるUPDATE

：ミスターエイリアンは境界が流体ではありません言うように、あなたが三角形を生成する方法を変更する必要が

<div style="height: 100%;"> 
    <div style="float: left; height: 100%;" id="triangleWrapper"> 
     <div style="height: 100%;" class="segmentTriangle"></div> 
    </div> 
    <div class="fontsize" data-bind="text: replies, style: { height: heightFormatted, background: background }" style="width: 90%;padding-right:20px; height: 100%; text-align: right; float: left;"></div> 
</div> 

Answer 1

。

CSSは次のようになります。

.triangle { 
    width: 40%; 
    height: 40%; 
    left: 0px; 
    top: 0px; 
    background: linear-gradient(to right bottom, black 50%, transparent 50%) 
} 

demo

あなたは、あなたが黒で三角形の対角線を作る最高のスーツ親の割合に三角形の寸法を設定します。その基本要素が応答するよう

変更デモ：

demo2

新しいデモは、あなたのHTMLを含めることができます。

私はそれを動作させるために最低限にCSSを追加しました：ラッパーに幅を追加して、身体& HTMLに100％の高さを追加しました。それ以外の場合はレイアウトなので、これはうまくいくはずです。

Answer 2

This fiddleは、CSSと1つの要素だけを使用するレスポンシブなCSSトライアングルを実装しています。上、下、左と右を指す三角形を表示し、あなたの左上を指します。応答下向きの三角形は簡単にそれを達成するように変更することができます。

.triangle-top-left { 
    width: 0; 
    height: 0; 
    padding-bottom: 25%; 
    padding-left: 25%; 
    overflow: hidden; 
} 
.triangle-top-left:after { 
    content: ""; 
    display: block; 
    width: 0; 
    height: 0; 
    margin-left: -500px; 

    border-bottom: 500px solid transparent; 
    border-left: 500px solid #4679BD; 
} 

Pure CSS responsive trianglesに私の記事を参照してください応答三角形のために使用されるロジックの説明について。

Answer 3

私のソリューション：
http://codepen.io/malyw/pen/mhwHo/

説明：
私は、アクティブなサイドバーのメニュー項目をマークするには、矢印を必要としていました。
複数行のテキストがあるとき、矢印が壊れていました。
だからミューソリューションです：
使用：と後：

コード：

&:before { 
    top: 0px; background: linear-gradient(to right top, $color 50%, transparent 50%); 
} 

&:after { 
    top: 50%; background: linear-gradient(to right bottom, $color 50%, transparent 50%); 
} 

おかげで同じ幅の延伸矢印を提供するために、線形勾配と要素の前にアイデアのための@vals。