2

请找到这个 css 类来创建简单的 uparrow downarrow 左箭头和右箭头。

<html>
<style>
.left {border-bottom: 10px solid transparent;
    border-right: 10px solid red;
    border-top: 9px solid transparent;
    float: left;}
.right {border-bottom: 10px solid transparent;
    border-left: 10px solid red;
    border-top: 9px solid transparent;
    float: left;}
.top{ border-color: black transparent transparent;
    border-style: solid;
    border-width: 11px 7px 10px;
    float: left;}
.bottom {border-color: transparent transparent black !important;
    border-style: solid;
    border-width: 0 27px 19px 25px;
    float: right;}  
</style>    
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</html>

左类意味着向左箭头。，请任何人建议我使用简单的css创建箭头的更好方法

4

3 回答 3

3

如果您关心 IE7 兼容性，您在问题中提出的解决方案是最好的解决方案。

是的，还有其他方法可以实现相同的目标。

例如，如果您放弃对 IE7 的支持，那么您可以将这些相同的样式应用于:before/:after伪元素并避免使您的 HTML 混乱。

您还可以选择使用渐变来创建三角形 -示例。但是，这是一种在 IE9（即当前 IE 版本）中甚至无法运行的解决方案。

于 2012-07-29T20:52:39.103 回答
1

css 技巧可能受浏览器/版本限制。

您还可以在此处获取图标图像：http: //www.iconarchive.com/search?q=arrow +up

小的在这里： http: //p.yusukekamiyamane.com/icons/search/fugue/#keyword=arrow

于 2012-07-29T19:11:17.580 回答
0

可以使用这种样式创建一个 CSS 箭头。您需要设置箭头的宽度和高度。

div.left {
    z-index: 2000;
    width: 80px;
    height: 80px;
    border-top: 2px solid #ddd;
    border-left: 2px solid rgba(150,150,150,0.4);
    text-indent: -90000px;
    cursor: pointer;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

另外，如果您需要一种更简单的方法，那么您可以随时切换到使用图像

于 2012-07-29T19:02:14.767 回答