CSS三角形：在元素之前

ryoqjall 于 11个月前发布在其他

关注(0)|答案(4)|浏览(121)

我正在使用bootstrap，试图让div前面有一个CSS三角形。
http://jsfiddle.net/B2XvZ/11/
以下是我的非工作代码：

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

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

css

来源：https://stackoverflow.com/questions/20589780/css-triangle-before-element

4条答案

按热度按时间

nle07wnf1#

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

字符串

赞(0）回复(0）举报 11个月前

beq87vna2#

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

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

个字符

赞(0）回复(0）举报 11个月前

sgtfey8w3#

您可以使用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

赞(0）回复(0）举报 11个月前

lnlaulya4#

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;

字符串
}

赞(0）回复(0）举报 11个月前

我来回答

CSS三角形：在元素之前

4条答案

相关问题

热门标签

最新问答