CSS triangle :before element

E

4

38

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.

Epiphenomenalism answered 15/12, 2013 at 0:11 Comment(3)

Add a content property. – Wainscot 15/12, 2013 at 0:15

To understand how this shape works and for alternative solutions please see https://mcmap.net/q/45011/-how-do-css-triangles-work/1811992 – Futtock 21/11, 2014 at 11:50

Possible duplicate of Transparent arrow/triangle – Eddy 2/10, 2015 at 9:1

W

58

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

Wainscot answered 15/12, 2013 at 0:20 Comment(2)

thank you, this also solved my problem. But what does the CSS ISO \A stand for? – Gruver 1/12, 2015 at 10:24

@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. – Wainscot 1/12, 2015 at 13:53

C

13

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

<div class='fluid-container'>
  <ul class='foo'>
    <li class='bar row'>
      <div class='a'>asdf</div>
      <div class='b'>asdgf</div>
      <div class='c'>asj</div>
      <div class='d pull-right'>this needs a css triangle</div>
    </li>
  </ul>
</div>

Carver answered 15/12, 2013 at 0:20 Comment(0)

G

4

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

Grice answered 28/5, 2021 at 19:31 Comment(1)

But you can't change the color then, right? – Jackfish 18/3, 2022 at 18:1

H

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;

}

Hyphenated answered 14/12, 2019 at 16:46 Comment(0)

Recommended topics

Hot tags