Question

我想在小表格的文本旁边添加小三角形。我该怎么做？这是我的代码：

<tr>
     <th st-sort="firstname" class>Firstname</th>
     <th st-sort="lastname" class>Lastname</th>
     <th st-sort="street" class>Street</th>
     <th st-sort="town" class>Town</th>
     <th st-sort="zipCode" class>ZipCode</th>  
</tr>

非常感谢您的回答。

Answer 1

我建议你使用“Font awesome CSS framework”来获取这些图标。它在项目中实现起来非常简单，也是开源的。

http://fortawesome.github.io/Font-Awesome/icon/caret-up/

Answer 2

您可以使用css添加三角形，请参阅示例here

或者，您也可以使用fontawesome或包含三角形的类似字体。

注意：两种情况都不需要javascript。

Answer 3

这里 - 在CSS中试试这个。您可以调整边框宽度以更改箭头的形状和大小，如果希望箭头指向另一个方向，则可以使用变换或切换哪些边有边框。只需将箭头div放在文本旁边的所需位置即可。

＆＃13;

.triangleDiv {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #007bff;
}

＆＃13;

<div class="triangleDiv"></div>

＆＃13;

Answer 4

如果您只需要少量文本，可以通过在现有文本中添加unicode三角形来手动完成：

<tr>
 <th st-sort="firstname" class>&#9650;Firstname</th>
 <th st-sort="lastname" class&#9650;>Lastname</th>
 <th st-sort="street" class>&#9650;Street</th>
 <th st-sort="town" class>&#9650;Town</th>
 <th st-sort="zipCode" class>&#9650;ZipCode</th>  
</tr>

以下是一些三角形及其小数值：

►＃9658;

▲＃9650;

▼＃9660;

◄＃9668;

Answer 5

以下是使用pseudo element如何实现此目标的快速演示：

＆＃13;

div{
  position:relative;
  padding-left:30px;
  height:30px;
  font-size:30px;
  line-height:30px;
  display:inline-block;
  }
div:before{
  content:"";
  position:absolute;
  border-left:15px solid red;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  top:0;
  left:0;
  }

＆＃13;

<div>Hello World</div>

＆＃13;

文本旁边的三角形

5 个答案: