CSS triangle :before element

Question

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.

To understand how this shape works and for alternative solutions please see http://stackoverflow.com/q/7073484/1811992 — web-tiki, Nov 21 '14 at 11:50
Possible duplicate of [Transparent arrow/triangle](http://stackoverflow.com/questions/23758922/transparent-arrow-triangle) — Alvaro Menéndez, Oct 02 '15 at 09:01

score 56 · Accepted Answer · answered Dec 15 '13 at 00:20

56

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.

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

answered Dec 15 '13 at 00:20

Josh Crozier

233,099
56
391
304

1

thank you, this also solved my problem. But what does the CSS ISO \A stand for? – Frau Wolf Dec 01 '15 at 10:24
3

@FrauWolf `\A` is a carriage return. I think I did that for some older browser quirk (probably IE). It's not needed anymore, though. `content: ''` would work just fine. – Josh Crozier Dec 01 '15 at 13:53

score 12 · Answer 2 · answered Dec 15 '13 at 00:20

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

score 2 · Answer 3 · answered Dec 14 '19 at 16:46

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;

}

score 2 · Answer 4 · answered May 28 '21 at 19:31

2

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

answered May 28 '21 at 19:31

Ayrton Krizan

91
1
4

But you can't change the color then, right? – AlexioVay Mar 18 '22 at 18:01

CSS triangle :before element

4 Answers4

Linked

Related