我想Ø根据屏幕分辨率调整按钮大小,在较小的设备屏幕上以及电脑屏幕上如何根据屏幕分辨率
-1
A
回答
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;
}
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;
}
1
这里是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;
}
5
其他的答案是正确的,但它们不是等边像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;
}
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的功能。
相关问题
- 1. 如何根据设备/屏幕分辨率调整屏幕?
- 2. CSS根据屏幕分辨率
- 3. 根据屏幕分辨率横幅
- 4. 代码,根据屏幕分辨率
- 5. 屏幕分辨率
- 6. 屏幕分辨率
- 7. 屏幕分辨率
- 8. 屏幕分辨率
- 9. 屏幕分辨率
- 10. 屏幕分辨率
- 11. iPhone模拟器屏幕分辨率vs iPhone屏幕分辨率
- 12. 如何根据屏幕分辨率动态添加childviews布局
- 13. 如何根据屏幕分辨率查看徽标?
- 14. 如何根据屏幕分辨率缩放图像?
- 15. 如何根据屏幕分辨率调整jqGrid高度?
- 16. 如何根据屏幕分辨率正确缩放网页?
- 17. 如何根据屏幕分辨率缩放libgdx中的精灵?
- 18. 如何根据屏幕分辨率调整图像大小?
- 19. 如何根据屏幕分辨率调整div的大小
- 20. 如何根据引导屏幕分辨率
- 21. 如何根据屏幕分辨率移动图标?
- 22. XAML:如何根据屏幕分辨率设置控件属性?
- 23. 如何阅读屏幕分辨率 - 并更改此分辨率?
- 24. Qt屏幕分辨率初始屏幕
- 25. 根据屏幕分辨率更改屏幕分辨率(不改变显示器分辨率并使用最大化屏幕选项)
- 26. 假屏幕分辨率
- 27. 更改屏幕分辨率
- 28. Android的屏幕分辨率
- 29. Nightmarejs屏幕分辨率
- 30. 屏幕分辨率低,xamarin
您是否特别需要
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 :) –