CSS背景 - 可以繪製一些東西嗎？

我在可排序的html表中有一個標題行。我想在當前排序的列上顯示箭頭/向下箭頭。我知道我可以爲此使用背景圖片，但該網站是第三方託管的，我無法上傳圖片文件。只編輯樣式表。CSS背景 - 可以繪製一些東西嗎？

反正有'通過CSS'繪製'箭頭並將其粘貼在背景中嗎？或者也許使用after和content來完成類似的事情？ th有類表示排序與排序。

<table> 
    <thead> 
     <th class="sortup">A</th> <!-- Draw an arrow via CSS? --> 
     <th>B</th> 
     <th>C</th> 
    </thead> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td>   
    </tr> 
</table>

來源

2013-02-26 mrtsherman

箭頭你的意思是一個簡單的三角形？或者是一個尾隨塊的三角形？（'>'或' - >'） – George 2013-02-26 16:35:43

@ F4r-20 - 向上與向下的三角形。沒有必要的拖尾塊。 – mrtsherman 2013-02-26 16:37:14

請參閱otinanai的答案 - 這將是我的，因爲他首先到達那裏。這是我個人的最愛。 – George 2013-02-26 16:37:44

對於向上的箭頭：

th:after { 
    content:""; 
    border-style: solid; 
    border-width: 0 8px 10px 8px; 
    border-color: transparent transparent #007bff transparent; 
}

對於向下箭頭：

th:after { 
    content:""; 
    border-style: solid; 
    border-width: 10px 8px 0 8px; 
    border-color: #007bff transparent transparent transparent; 
}

這裏的演示：http://jsfiddle.net/GLz2b/

來源

2013-02-26 16:36:59 otinanai

請看看我的編輯。似乎我錯過了「內容」屬性。對於那個很抱歉。 – otinanai 2013-02-26 16:43:55

是的，這是一個非常酷的方式來做到這一點。相關：[這個CSS三角形如何工作？]（http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work）唯一的問題，我可以想象的是，你必須指定顏色，而使用unicode字符將繼承文本顏色。或者至少我不能讓它起作用，這怎麼解決？：http://jsfiddle.net/GLz2b/2/使用'inherit'使所有東西都搞砸了。 – 2013-02-26 16:52:52

成品，包含衛斯理的反饋也在定位方面。 http://jsfiddle.net/L5K3k/4/ – mrtsherman 2013-02-26 16:56:09

您可以使用：前/：after僞元素：

.sortup:after { 
    content:"\25BC"; 
    float:right; 
} 
.sortdown:after { 
    content:"\25B2"; 
    float:right; 
}

演示：使用http://jsfiddle.net/9KHkp/1/

特點：

隨意使用url(/path/to/image.png)，而不是爲content財產。

來源

2013-02-26 16:35:05

非常酷。我不知道如何使用unicode字符。在我的例子中完美工作。 http://jsfiddle.net/fJ7Gn/2/ – mrtsherman 2013-02-26 16:40:26

啊，可能需要交換箭頭，但你明白了。是的，這看起來不錯。您可能想要使用絕對定位，因此在進行排序時不會出現移位文字。 – 2013-02-26 16:40:45

CSS背景 - 可以繪製一些東西嗎？

回答

相關問題