文本旁边的三角形答案

【问题标题】：Triangle next to the text文本旁边的三角形
【发布时间】：2015-03-17 21:31:50
【问题描述】：

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

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

非常感谢您的回答。

【问题讨论】：

“三角形”是什么意思？一个小插入符？
当您点击表格标题时，图标会出现。检查this
在文本旁边创建一个 span 标签，并在伪类的帮助下进行相应的样式设置。
试试this，编辑调整位置

标签： html css angularjs css-shapes smart-table

【解决方案1】：

下面是如何使用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;
  }

&lt;div&gt;Hello World&lt;/div&gt;

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢，但我用 .st-sort-ascent:before { content: "\25B4"; } .st-sort-descent:before { 内容："\25BE"; }

【解决方案3】：

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

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

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

【讨论】：

谢谢，但我用 .st-sort-ascent:before { content: "\25B4"; } .st-sort-descent:before { 内容："\25BE"; }

【解决方案4】：

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

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

&lt;div class="triangleDiv"&gt;&lt;/div&gt;

【讨论】：

谢谢，但我用 .st-sort-ascent:before { content: "\25B4"; } .st-sort-descent:before { 内容："\25BE"; }

【解决方案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;

【讨论】：

谢谢，但我这样做：.st-sort-ascent:before { content: "\25B4"; } .st-sort-descent:before { 内容："\25BE"; }