我想根据屏幕分辨率调整按钮大小,在较小的设备屏幕上以及在 PC 屏幕上
问问题
502 次
5 回答
4
其他答案是正确的,但它们不像 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;
}
于 2013-08-16T14:19:31.727 回答
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;
}
于 2013-08-16T14:15:40.653 回答
1
<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-16T14:16:32.403 回答
1
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-16T14:14:13.517 回答
0
如果我必须这样做,我认为最好的方法是映射图像。您必须制作一个具有三角形形状和透明背景的简单图像,然后使用地图您可以使用此形状定义一个区域(仅具有三个坐标)。您可以将 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-16T16:32:20.597 回答