CSS三角形：:before元素

Question

CSS三角形：:before元素

35

我正在使用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 之间没有间隔。我尝试过通过浮动元素来实现这一点，但没有成功。

- amagumori

2

添加一个 content 属性。 - Josh Crozier

1

要了解这个形状的工作原理以及替代方案，请参见https://dev59.com/Ymw05IYBdhLWcg3wuUAL。 - web-tiki

可能是[透明箭头/三角形]的重复问题 (https://dev59.com/A2Ag5IYBdhLWcg3wS5aC)。 - Alvaro Menéndez

4个回答

12

你需要content属性和其他一些东西

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

- Slawa Eremin

3

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

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

在你的HTML中需要一个meta字符集：

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

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

- Ayrton Krizan

但是你不能改变颜色，对吗？ - AlexioVay

2

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;

}

- Adam Colton

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

您需要指定content属性。

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

jsFiddle示例

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