CSS triangle menu

Pozdravljeni

Zanima me kako bi lahko naredil menu, da bi se ob hover efektu na koncu menuja prikazal "trikotnik", ki pa se poveča glede na višino menu povezave (li). Širina trikotnika mora biti vedno enaka, samo višina, se glede na tekst poveča.

Primer: http://postimg.org/image/aqboa79lx/

Poglej si tole: https://css-tricks.com/snippets/css/css-triangle/ ...

Z fixed-size border trikotniki ne bo šlo samo s CSS.

Se da pa s CSS fino igrat :)

Takolele

Zaradi FF je je barva v rgb ne v hex.

<ul>

<li class="right-arrow">

<a href="#">Link with</a>

</li>

<li class="right-arrow">

<a href="#">Link with Right Arrow</a>

</li>

</ul>

.right-arrow {

width: 100px;

background-color: orange;

margin: 10px;

position: relative;

padding:15px;

list-style:none;

}

.right-arrow:after, .right-arrow:before {

content: "";

position: absolute;

left: 100%;

width: 20px;

height: 50%;

}

.right-arrow:before {

top: 0px;

background: linear-gradient(to top right, green 50%, transparent 51%);

}

.right-arrow:after {

bottom: 0px;

background: linear-gradient(to bottom right, green 50%, transparent 51%);

}

.right-arrow:hover:after, .right-arrow:hover:before {

width: 40px;

}

https://jsfiddle.net/mmupt2c6/

Najlepša hvala vsem trem za rešitev problema.