如何使用简单的css创建uparrow向下箭头

请找到这个css类来创建简单的向上箭头向左箭头和向右箭头。如何使用简单的css创建uparrow向下箭头

<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

来源

2012-07-29 praveenpds

CSS技巧可能是浏览器/版本有限。

您还可以得到图标图像的位置： http://www.iconarchive.com/search?q=arrow+up

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

来源

2012-07-29 19:11:17

一个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-29 19:02:14

IE-7和更旧的浏览器？ – praveenpds 2012-07-29 19:05:04

为ie7和更老，它更好地切换到图像，与他们一起工作就像打你的头 – 2012-07-29 19:11:08

你已经在你的问题提出的解决方案是如果你关心IE7兼容最好的之一。

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

例如，如果你删除IE7支持，那么你可以将这些相同的样式:before/:after伪元素和避免弄乱你的HTML。

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

来源

2012-07-29 20:52:39 Ana

请提供工作的例子，使用：之前和：之后psdo-Classes – praveenpds 2012-07-30 05:02:38

如何使用简单的css创建uparrow向下箭头

回答

相关问题