Question

我正在使用bootstrap，尝试让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之间没有间隙。我试图通过浮动元素来做到这一点，但没有成功。

Answer 1

您需要指定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;
}

Answer 2

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

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

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

}

Answer 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

CSS三角形：元素之前

4 个答案: