어떻게 화면 해상도

Question

내가 오 작은 장치 화면에로에뿐만 아니라 그것이 매우 간단하게

Answer 1

http://css-tricks.com/snippets/css/css-triangle/ PC 화면에서 화면 해상도에 따라 버튼의 크기를 조정하려면에 따라 버튼의 크기를 조절합니다.

HTML :

<div class="arrow-up"></div> 
<div class="arrow-down"></div> 
<div class="arrow-left"></div> 
<div class="arrow-right"></div> 

CSS : 여기

.arrow-up { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 

    border-bottom: 5px solid black; 
} 

.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 

    border-top: 20px solid #f00; 
} 

.arrow-right { 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 

    border-left: 60px solid green; 
} 

.arrow-left { 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue; 
} 

Answer 2

<a href='#'> 
    <div class='tri-button'></div> 
</a> 

.tri-button { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 50px solid black; 
} 

Demo

Answer 3

가 JSBin with equilateral triangle

당신의 CSS에서

는

.triangle { 
    width: 0; 
    height: 0; 
    border-left: 40px solid transparent; 
    border-right: 40px solid transparent; 
    border-bottom: 60px solid blue; 
} 

Answer 4

다른 답변은 정확하지만은 OP 요청과 같은정되지 않습니다. 대신이 시도 :

http://jsfiddle.net/mt2yA/

<a href='#'> 
    <div class='tri-button'></div> 
</a> 

.tri-button { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 80px solid black; 
} 

Answer 5

내가 가장 좋은 방법은 이미지를 매핑하는 것을 가정 해이 작업을 수행해야합니다. 삼각형 모양과 투명한 배경을 가진 간단한 이미지를 작성한 다음 맵을 사용하여이 모양으로 영역을 정의 할 수 있습니다 (세 좌표 만 사용). 영역에 href 속성을 추가하고이를 링크로 사용할 수 있습니다.

<img src="triangle.png" usemap="#mapa" width="100" height="100"/> 
<map name="mapa"> 
<area shape="poly" coords="0,100,50,0,100,100,0,100" href=""> 

삼각형 모양의 버튼을 생성 할 수 있습니다. 당신이 원하는 경우 js의 일부 기능을이 영역에 추가 할 수 있습니다.