How to adjust button sizes according to screen resolutions

Question

I want o adjust button sizes according to screen resolutions,on smaller devices screens as on well as on PC screen

http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work?rq=1 — j08691, Aug 16 '13 at 14:16
PLease view my posted answer and accept it as answer for close this issue. http://stackoverflow.com/questions/18275323/how-to-make-trialngular-shaped-button-in-css/18275451#18275451 ThanQ :) — Naveen Kumar Alone, Aug 17 '13 at 07:08

score 4 · Answer 1 · answered Aug 16 '13 at 14:19

The other answers are correct, but they are not equilateral like the OP requests. Try this instead:

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

score 2 · Answer 2 · answered Aug 16 '13 at 14:15

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

answered Aug 16 '13 at 14:15

brbcoding

13,378
2
37
51

score 1 · Answer 3 · answered Aug 16 '13 at 14:14

http://css-tricks.com/snippets/css/css-triangle/ makes it extremely simple.

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

Naveen Kumar Alone · Answer 4 · 2013-08-17T07:07:42.480

1

Here is JSBin with equilateral triangle

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

In your CSS

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

edited Aug 17 '13 at 07:07

answered Aug 16 '13 at 14:16

Naveen Kumar Alone

7,536
5
36
57

score 0 · Answer 5 · answered Aug 16 '13 at 16:32

If I would have to do this I suppose that the best way is mapping an image. You have to do a simple image with triangle shape and transparent background and then using a map you could define an area with this shape (only with three coordinates). You can add a href attribute to the area and use it as a link.

<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="">

You would be generating a button with triangle shape. You can add to this area some functions of js if you want too.

How to adjust button sizes according to screen resolutions

5 Answers5