Question
I'm using bootstrap, trying to make a div have a CSS triangle before it.
Here is my non-working code:
https://stackoverflow.com/questions/20589780
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian.d:before {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #dd4397 transparent transparent;
}
The way I'd like it to look is for there to be a pink left-pointing triangle right before the text "this", with no gap between it and the div. I've tried to do this by floating the elements also, with no success.
Solution
You need to specify the content property.
For positioning, add position:relative to the parent, and then absolutely position the arrow -15px to the left.
.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;
}
OTHER TIPS
You need content property and some other
.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;
}
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;
}
You can use UTF-8 Geometric Shapes.
a:before {
content: '\25B2'
}
in your HTML need a meta charset:
<html>
<head>
<meta charset="utf-8" />
...
</head>
</html>
Geometric shapes list: https://www.w3schools.com/charsets/ref_utf_geometric.asp
