Question

我希望根据屏幕分辨率调整按钮尺寸，在较小的设备屏幕上以及在PC屏幕上

Answer 1

其他答案是正确的，但它们不像OP请求那样等边。试试这个：

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

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

Answer 4

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

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函数。

如何根据屏幕分辨率调整按钮大小

5 个答案: