I'm using bootstrap, trying to make a div have a CSS triangle before it.
Here is my non-working code:
.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.
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