수평 규칙에서 반응하는 삼각형

Question

나는 환상적인 기하학적 인 수평 규칙을 만들려고합니다. 그것은 페이지의 중앙에서 만나는 두 개의 삼각형으로 구성됩니다.

아래는 내가 지금까지 달성 한 것을 보여주는 해킹 코드입니다. 내 문제는 반응하지 않는다는 것입니다. 삼각형의 너비가 창 너비의 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-widthvw위한 수단을 사용하는 것이다. vw은 뷰포트 너비가 증가/감소함에 따라 테두리가 적용됨을 의미하는 뷰포트 너비와 관련이 있습니다. 삼각형이 동일한 모양을 유지하도록하려면 위쪽/아래쪽 테두리를 vw 단위로 수정하면 삼각형의 height이 width과 관련이 있습니다.

오히려 사용 margin보다 height 개의 삼각형 height가 hr에 사용할 수있는 방법이 더 쉽게 삼각형의 위치를 ​​지정하게하고 충분한 공간들을 위해 할당된다 (그래서 그들은 다른 요소를 겹치지 않도록 보장 동등).

는 다음과 같은 수정이 필요한이 달성하기

• height: 16vw;right: 50%;-bottom: 0;에 border-width: 8vw 25vw 0 0;, top: 25px;로 변경 border-width: 50px 200px 0 0;
• hr 및 left: calc(50% - 200px);에 추가 hr
• 에서 margin: 50px 0;을 제거 hr:before
• 변경hr:after

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