html - 文本旁边的三角形

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

这是一个快速演示，说明如何使用 a 来实现pseudo element：

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;
  }

<div>Hello World</div>

Answer 2

我建议您对此类图标使用“Font Awesome CSS 框架”。在项目中实现非常简单，而且它是开源的。

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

Answer 3

您可以使用 css 添加三角形，请参见此处的示例

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

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

Answer 4

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

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

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

Answer 5

如果您只需要处理少量文本，您可以通过在现有文本中添加一个 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;