如何使用簡單的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向下箭頭

回答

相關問題