マーキングエリアを反応的にしたい。

Question

ボーダー500pxは固定されています。応答性にするにはどうすればいいですか？ .page1 :: before areaにあります。

VW（ビューポートの幅）または％のようなフレキシブル部への画素

.page1{ 
    width:100%; 
    height:auto; 
    clear:both; 
    padding:90px 0 40px 0; 
    background-color:#0D9DDA; 
    position:relative; 
} 
.page1::before{ 
    content:""; 
    width:0; 
    height:0; 
    display:block; 
    border-width:80px 500px 0px; 
    border-style:solid; 
    border-color:#0D9DDA transparent transparent ; 
    position:absolute; 
    top:100%; 
    left:0; 
    z-index:5; 
} 

<div class="page1"></div> 

Answer 1

変更。 1920pxワイドディスプレイ1920分の500〜= 26vw

Answer 2

セットアップ表示サイズ基準は言う30emにあなたは500pxなどを望んでいたので、場合

を、およびとしてのCSSのコードを追加します（あなたは、ピクセル単位のすべてを変更する必要があります）続く。もちろんそれを正しくするためにはさらに微調整する必要があります。

[![/* Responsive < 30em */ 
@media all and (max-width: 29.9375em){ 

.page1{width:100%; 
    height:auto; 
    clear:both; 
    padding:90px 0 40px 0; 
    background-color:#0D9DDA; 
    position:relative; 
    } 
.page1::before{content:""; 
      width:0; 
      height:0; 
      display:block; 
      border-width:40px 200px 0px; 
      border-style:solid; 
      border-color:#0D9DDA transparent transparent ; 
      position:absolute; 
      top:100%; 
      left:0; 
      z-index:5; 
} 
} 
/* larger display > 30em*/ 
@media all and (min-width: 30em){ 

.page1{width:100%; 
    height:auto; 
    clear:both; 
    padding:90px 0 40px 0; 
    background-color:#0D9DDA; 
    position:relative; 
    } 
.page1::before{content:""; 
      width:0; 
      height:0; 
      display:block; 
      border-width:80px 500px 0px; 
      border-style:solid; 
      border-color:#0D9DDA transparent transparent ; 
      position:absolute; 
      top:100%; 
      left:0; 
      z-index:5; 
} 
}][1]][1]