CODEWITHSUNDEEP
htmlcss
le.lop
le.lop

Reputation: 33

How to put a css triangle before a span

I am trying to put a css triangle before my span and for some reason nothing is showing up at all, any idea what is wrong?

.triangle:before {
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-right: 6px solid green;
  border-bottom: 3px solid transparent;
  right: 100%;
  top: 0%;
  position: absolute;
  clear: both;
}

.triangle {
  position: relative;
}
<span class="triangle">Hi</span>

Upvotes: 0

Views: 2737

Answers (3)

FAROUK BLALOU
FAROUK BLALOU

Reputation: 728

You forgot 

content : '';

in your css

.triangle::before{
    content:'';
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-right: 6px solid green;
    border-bottom: 3px solid transparent;
    right:100%;
    top:0%;
    position: absolute;
    clear: both;
}

Upvotes: 4

Super User
Super User

Reputation: 9642

You have forgot to pass content:'' in your css, check updated snippet below: 

.triangle::before{
    content: '';
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-right: 6px solid green;
    border-bottom: 3px solid transparent;
    right:100%;
    top:7px;
    position: absolute;
}
.triangle{
    position: relative;
    display: inline-block;
}
<span class="triangle">HI</span>

Upvotes: 3

Pete
Pete

Reputation: 58422

Your span needs to use class not className and you need to add content:'' to your before css:

.triangle::before{
    content:'';
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-right: 6px solid green;
    border-bottom: 3px solid transparent;
    right:100%;
    top:0%;
    position: absolute;
    clear: both;
}
.triangle{
    position: relative;
}
<span class="triangle">Hi</span>

Upvotes: 2

Related Questions