CSS 배경 화살표 백분율 폭

Question

"멋진"삼각형 배경을 가진 상자가 있습니다 (상자의 50 %를 차지함). 나는 어떤 고정 된 너비에 대해서도 해결했지만, 모바일에서 너비가 더 이상 고정되지 않아서 모바일 장치에서 내 솔루션이 실패하는 것을 잊어 버렸습니다.

배경을 만들려면 테두리의 각면을 높이/너비의 절반으로 설정하는 테두리 기법을 사용하지만 테두리는 백분율 (%)이 될 수 없습니다.

어떻게 그럴 수 있습니까?

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

매우 간단한 HTML

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

possbile 경우 '비 자바 스크립트 옵션을 선호하는 것 :

다음은 내 코드입니다. 창 크기가 변경되면 너비를 설정할 수있을 것 같아요.

편집 : 달성하고 싶은 것은 검정색 배경 삼각형을 포함하는 요소의 전체 너비를 늘리는 것입니다. jsfiddle 창 크기를 조정하고 삼각형의 너비가 고정 된 모양을 확인하십시오. 그것은 "blueish"상자 폭 변경을 포함하지 않습니다. 나는 이것이 질문을 맑게하기를 바랍니다. 대신 기존의 삼각형 세대 기술의

And a jsfiddle link

Answer 1

를 사용하여 선형 배경. 이 업데이트 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%) 
}