Question

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

<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创建箭头的更好方法

Answer 1

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

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

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

您还可以选择使用gradients创建三角形 - example。但是，这是一个甚至不能在IE9中运行的解决方案，IE9是当前的IE版本。

Answer 2

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

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

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

Answer 3

可以使用此样式创建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);
}

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

如何使用简单的css创建uparrow downarrow

3 个答案: