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背景 - 可以绘制一些东西吗？

回答

相关问题