Crea un triangolo css/freccia crescente quando il div principale viene ridimensionato

Question

Questo è il mio triangolo css. Quando il contenitore genitore, che ha un'impostazione percentuale dell'altezza, viene ridimensionato, il triangolo dovrebbe ridimensionarlo.

Come deve cambiare la definizione di seguito che potrebbe funzionare?

Se non funziona con CSS comune, sono aperto anche per 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

che fa parte del mio layout:

<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

È necessario cambiare il modo in cui si genera il triangolo, come l'onorevole Alien dice confine non è fluido.

Il CSS sarebbe:

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

demo

si imposta la dimensione triangolo alla percentuale del genitore che più vi aggrada, allora si effettua la diagonale del triangolo in nero.

demo modificato in modo che gli elementi di base sono sensibili:

demo2

Nuova demo per inserire il tuo codice HTML.

ho aggiunto CSS per un minimo indispensabile per farlo funzionare: aggiunti 100 Altezza% al corpo & html, larghezza wrapper aggiunto. Altrimenti, è il tuo layout, quindi dovrebbe funzionare.

Answer 2

This fiddle implementa reattivi triangoli CSS utilizzando solo CSS e un elemento. Mostra triangoli di puntamento su, giù, sinistra e destra e il tuo è in alto a sinistra. Il reattivo triangolo verso il basso di puntamento può essere facilmente modificato per realizzarla:

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

Per la spiegazione sulla logica utilizzata per il triangolo reattivo vedere il mio articolo su Pure CSS responsive triangles.

Answer 3

La mia soluzione:
http://codepen.io/malyw/pen/mhwHo/

Descrizione:
avevo bisogno frecce per contrassegnare le voci di menu barra laterale attivi.
Quando avevo del testo multilinea, la freccia era rotta.
Così soluzione mu è:
uso : dopo e : prima elementi con lineare gradiente per fornire frecce allungate con la stessa larghezza:

Codice:

&: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%); 
} 

Grazie @vals per l'idea.