CSS三角形：元素前答案

【问题标题】：CSS triangle :before elementCSS三角形：元素前
【发布时间】：2014-01-02 14:18:06
【问题描述】：

我正在使用引导程序，试图让一个 div 在它之前有一个 CSS 三角形。

这是我的非工作代码：

.d:before {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #dd4397 transparent transparent;  
}

我希望它看起来的方式是在文本“this”之前有一个粉红色的左指三角形，它与 div 之间没有间隙。我也尝试通过浮动元素来做到这一点，但没有成功。

【问题讨论】：

添加 content 属性。
要了解这种形状的工作原理以及替代解决方案，请参阅stackoverflow.com/q/7073484/1811992
Transparent arrow/triangle的可能重复

标签： html css css-shapes

【解决方案1】：

你需要内容属性和其他一些

.d:before {
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #dd4397 transparent transparent;  
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

【讨论】：

【解决方案2】：

您需要指定content 属性。

对于定位，将position:relative 添加到父级，然后将箭头-15px 绝对定位到左侧。

jsFiddle example

.d {
    position:relative;
}

.d:before {
    content:"\A";
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #dd4397 transparent transparent;
    position: absolute;
    left: -15px;
}

【讨论】：

谢谢，这也解决了我的问题。但是 CSS ISO \A 代表什么？
@FrauWolf \A 是回车。我想我这样做是为了一些较旧的浏览器怪癖（可能是 IE）。不过，它不再需要了。 content: '' 可以正常工作。

【解决方案3】：

a:after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0px 15px;
border-color: #fff transparent transparent transparent;
display: inline-block;
vertical-align: middle;
position: absolute;
bottom: -13px;
left: 0;
right: 0;
margin: 0 auto;

}

【讨论】：

【解决方案4】：

您可以使用 UTF-8 几何形状。

a:before {
  content: '\25B2'
}

在您的 HTML 中需要一个元字符集：

<html>
<head>
<meta charset="utf-8" /> 
...
</head>
</html>

几何形状列表： https://www.w3schools.com/charsets/ref_utf_geometric.asp

【讨论】：