水平なルールの中の反応する三角形

Question

私は空想的な幾何学的に見える水平なルールを作成しようとしています。それは、ポイントがページの中央で出会う2つの三角形で構成されています。

以下は、私がこれまで達成したことを示すハッピーコードスニペットです。私の問題は、それが応答しないということです。私は三角形の幅がウィンドウの幅の50％に及ぶ必要があります。プラス私はcalcを使用しなければならなかったときに震えました。

私が欲しいものを達成することについて考えることができる唯一の方法は、境界の幅を大量にしてからoverflow-x: hidden;をコンテナに貼り付けることですが、これを行うにはより良い方法が必要であると確信しています。潜在的に何らかの種類のskewを使用していますか？

hr { 
 
    position: relative; 
 
    border: none; 
 
    margin: 50px 0; 
 
} 
 
hr:before { 
 
    content: ""; 
 
    border-style: solid; 
 
    border-width: 50px 200px 0 0; 
 
    border-color: blue transparent transparent transparent; 
 
    position: absolute; 
 
    left: calc(50% - 200px); 
 
    top: 25px; 
 
} 
 
hr:after { 
 
    content: ""; 
 
    border-style: solid; 
 
    border-width: 0 0 50px 200px; 
 
    border-color: transparent transparent red transparent; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: -25px; 
 
}

<hr />

Answer 1

一つの方法は、border-widthためvwユニットを使用することです。 vwは、ビューポートの幅を基準にしています。つまり、ビューポートの幅が増減すると境界線が適応します。三角形が同じ形状を保つようにするには、上/下の罫線をvw単位に変更することができます。これにより、三角形のheightは、widthになります。

ではなく二つの三角形のheightに等しいheightがhrに使用することができ、これはそれが簡単に三角形を配置することができ、十分なスペースが彼らのために割り当てられている保証します（そう、彼らは他の要素を重複しないmarginを使用）。

• はhr:before
• にright: 50%;に、border-width: 8vw 25vw 0 0;にbottom: 0;とleft: calc(50% - 200px);からtop: 25px;をheight: 16vw;変更border-width: 50px 200px 0 0;
hrに追加 hr
• からmargin: 50px 0;を削除します。以下の修正が必要とされ、これを達成するために

  変更

hr { 
 
    position: relative; 
 
    border: none; 
 
    height: 16vw; 
 
} 
 

 
hr:before { 
 
    content: ""; 
 
    border-style: solid; 
 
    border-width: 8vw 25vw 0 0; 
 
    border-color: blue transparent transparent transparent; 
 
    position: absolute; 
 
    right: 50%; 
 
    bottom: 0; 
 
} 
 

 
hr:after { 
 
    content: ""; 
 
    border-style: solid; 
 
    border-width: 0 0 8vw 25vw; 
 
    border-color: transparent transparent red transparent; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
}

<hr />

に top: 0;から border-width: 0 0 8vw 25vw;と top: -25px; 210