Css Hintergrund Pfeil Prozentbreite

Question

Ich habe eine Box mit einem "cool" aussehenden Dreieck Hintergrund (deckt 50% der Box). Ich löste für jede feste Breite, aber vergaß, dass auf der mobilen Seite die Breite nicht mehr behoben ist, so dass meine Lösungen auf mobilen Geräten fehlschlagen.

Um den Hintergrund zu erstellen, verwende ich Randtechnik Einstellung jeder Seite der Grenze auf die Hälfte der Höhe/Breite, aber Grenzen können nicht in Prozent (%) sein.

Wie kann ich das erreichen?

Unten ist mein Code:

.outer { 
    width: 100%; 
    height: 300px 
} 
.background-triangle { 
    bottom: 0; 
    right: 0; 
    height: 0; 
    width: 0; 
    border-right: 250px solid rgba(0,0,0,.1); /* half width */ 
    border-bottom: 150px solid rgba(0,0,0,.1);/*half height*/ 
    border-left: 250px solid transparent;/*half width*/ 
    border-top: 150px solid transparent; /* half height*/ 
} 

.box-color { 
    position: relative; 
    background-color: #6699cc; 
} 

und eine sehr einfache html

<div class="outer"> 
    <a href="/#"> 
     <div class="box-color" style=""> 
      <div class="background-triangle"></div> 
     </div> 
    </a> 
</div> 

Ich würde eine nicht-Javascript-Option vorziehen, wenn possbile. Ich denke, ich könnte die Breite einstellen, wenn sich die Fenstergröße ändert.

Edit: Was ich erreichen möchte, ist, dass das schwarze Hintergrunddreieck die volle Breite seines enthaltenden Elements streckt. Versuchen Sie, das jsfiddle-Fenster in der Größe zu ändern und zu sehen, wie das Dreieck eine feste Breite hat. Es folgt nicht die beinhaltende "bläuliche" Boxbreitenänderung. Ich hoffe, das klärt die Frage auf.

And a jsfiddle link

Answer 1

Verwenden linearer Hintergrund anstelle der herkömmlichen Dreieckserzeugungstechnik. Sehen Sie sich diese Lösung bei dieser aktualisierten jsFiddle: https://jsfiddle.net/ashekthegreat/kmmg9L01/6/

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