如何根據屏幕分辨率

-1

我想Ø根據屏幕分辨率調整按鈕大小，在較小的設備屏幕上以及電腦屏幕上如何根據屏幕分辨率

2013-08-16 Mirza Talat

http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work?rq=1 – j08691

請查看我發佈的答案，並接受它作爲解決此問題的答案。 http://stackoverflow.com/questions/18275323/how-to-make-trialngular-shaped-button-in-css/18275451#18275451 ThanQ :) –

http://css-tricks.com/snippets/css/css-triangle/使得它非常簡單的調節按鈕大小。

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; 
}

來源

2013-08-16 14:14:13 Zach

<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

來源

2013-08-16 14:15:40 brbcoding

這裏是JSBin with equilateral triangle

<a href='#'> 
    <div class="triangle"></div> 
</a>

在你的CSS

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

來源

2013-08-16 14:16:32

其他的答案是正確的，但它們不是等邊像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; 
}

來源

2013-08-16 14:19:31

如果我必須這樣做我想，最好的辦法就是繪製的圖像。你必須做一個帶有三角形形狀和透明背景的簡單圖像，然後使用一個地圖來定義這個形狀的區域（只有三個座標）。您可以將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的功能。

來源

2013-08-16 16:32:20

如何根據屏幕分辨率

回答

相關問題