어떻게하면 삼각형이 반응합니다?

Question

데스크탑 컴퓨터에서만 작동하기 때문에 반응 형 삼각형을 넣으려고합니다. 어떻게 할 수 있습니까?

... 나는 여기에 코드를 가지고 있고, 나는 휴대 전화, 태블릿, 대답하는 사업부로 내 사업부를 켜려고

삼각형 코드 :

*{ 
background-color: black; 
    padding:0; 
    margin:0 auto; 
} 


.triangle-down { 
width: 0px; 
height: 0px; 
border-style: solid; 
border-width: 642px 187.5px 0 187.5px; 
border-color: #007bff transparent transparent transparent; 
} 

HTML 코드

<div class="triangle-down"></div> 

Answer 1

이면 배경 radient 사용에 신경 쓰지 않아도됩니다. 본문 배경으로 사용할 수있는 대안. 당신은 국경이 제대로 확장하려면 http://codepen.io/gc-nomade/pen/mBjtC

body { 
    background: 
    linear-gradient(
     to top left, 
     black, 
     black 50%, 
     rgba(0,0,0,0) 50%, 
    rgba(0,0,0,0)) top center no-repeat, 
    linear-gradient(
     to top right, 
     black, 
     black 50%, 
     #007bff 50%, 
     #007bff ) top center no-repeat; 
    background-size:40% 200%;/* set your own values and units here */ 
    background-color: black; 
    padding:0; 
    margin:0 auto; 
    min-height:100%; 
} 
html { 
    height:100%; 
} 

Answer 2

픽셀 대신 백분율을 사용해야합니다. 픽셀 크기를 컨텍스트 (일반적으로 선언하지 않은 바디 컨테이너의 크기)로 나눠서 계산할 수 있습니다 일반적으로 쉽게 1000px입니다. ems를 사용하려면 기본 피어 크기로 나누거나 변환기를 사용할 수 있습니다. 기본 글꼴 크기를 선언하지 않은 경우 보통 16px http://pxtoem.com/