Draw triangle on right-border

Question

I have a ul element with many li. Some lines (li) are highlighted with yellow background.

I want to add a triangle to the right border. This triangle should looks like an arrow that point to the text.

Something like this: enter image description here

I tried to draw this triangle with right border, but this not giving me the right shape.

<ul>
    <li>not highlighted</li>
    <li>not highlighted</li>
    <li class="highlighted">HIGHLIGHTED</li>
    <li>not highlighted</li>
</ul>
<style>
.highlighted {
    border-right: 20px solid red;
}
</style>

Please give a notice on the that one li can contain more the one line, so the height of the line can be changed. Arrow with fixed height (of one line) is good enough.

Is this possible? If yes, how?

you could us an image and make I background of the li! and position it where you want — Amanuel Nega, Jan 08 '15 at 18:17
Use both `:after` *and* `:before`: http://jsfiddle.net/zen5vvzw/1/ — George, Jan 08 '15 at 18:22

score 7 · Answer 1 · answered Jan 08 '15 at 18:30

7

You can use transform and Pseudo-elements

li{
  height: 20px;
  line-height: 20px;
  position: relative;
  margin-bottom: 10px
}
li.highlighted:before, li.highlighted:after{
  content: '';
  position: absolute
}
li.highlighted:before{
  width: 12px;
  height: 12px;
  right: 10px;
  transform: rotate(45deg);
  border-left: 2px solid red;
  border-bottom: 2px solid red
}
li.highlighted:after{
  height: 20px;
  width: 2px;
  right: 15px;
  background: red;
  top: -3px
}

<ul>
    <li>not highlighted</li>
    <li>not highlighted</li>
    <li class="highlighted">HIGHLIGHTED</li>
    <li>not highlighted</li>
</ul>

answered Jan 08 '15 at 18:30

Gildas.Tambo

22,173
7
50
78

1

@No1Lives4Ever you should consider accepting this as the correct answer. It's better – Jan 09 '15 at 22:22
Better, if the outlined sketch was indeed what he wanted... But it's a nice solution, I upvoted it too. – MightyPork Jan 09 '15 at 23:53

score 6 · Accepted Answer · answered Jan 08 '15 at 18:19

This should do it (but I doubt you can get outlined arrow without an image - only full).

.highlighted:after {
  content: "";
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid red;
}

<ul>
  <li>not highlighted</li>
  <li>not highlighted</li>
  <li class="highlighted">HIGHLIGHTED</li>
  <li>not highlighted</li>
</ul>

Based on this tutorial.

score 2 · Answer 3 · answered Jan 08 '15 at 18:22

Like this:

li{ 
    position: relative;
}

.highlighted:after, .highlighted:before { 
    right: 0px;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; 

} 

.highlighted:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
} 
.highlighted:before { 
    border-color: rgba(245, 23, 7, 0);
    border-right-color: #f51707;
    border-width: 9px;
    margin-top: -9px;
}

<ul>
    <li>not highlighted</li>
    <li>not highlighted</li>
    <li class="highlighted">HIGHLIGHTED</li>
    <li>not highlighted</li>
</ul>

Draw triangle on right-border

3 Answers3