Triangle inside div with text - css

Question

I've got a side bar which contains a list, however I want a triangle located at the right side of the div. Now I know about the border trick, but then the text isn't located at the same location where it should be.
JSFiddle: http://jsfiddle.net/ppX53/44/
This is how my code looks like:
HTML:
<li id="activeMenuLi">
Admin Panel
</li>'
CSS:
.multilevelpushmenu_wrapper li #activeMenuLi{
width: 213px;
height: 45px;
border-top: 20px solid transparent;
border-right: 30px solid red;
border-bottom: 20px solid transparent;
}
How it looks like now:
The triangle is not complete, but it needs to be :).I think you know how I want it to look like.
I Use the following sidebar: link.
Note: I am not a complete rookie with CSS. I just hate building sidebars ^^. I'll try building a JSFiddle.
OfficialBAMM

Answer 1

Taking a look at your code, the problem is that you're attempting the "border-trick" on the li itself instead of a :before/:after pseudo-element. If you move the borders to a pseudo-element, it works. I've provided an example below.
body, html {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif
}
h2 {
margin: 0 0 0.5em;
padding: 0.5em;
}
div {
background-color: #40516F;
color: #FFF;
width: 213px;
position: relative;
}
ul, li {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
ul { width: 213px; }
li > a {
color: #FFF;
border-top: 1px solid #445675;
padding: 0.6em;
display: block;
position: relative;
text-decoration: none;
}
li > a:hover {
background-color: #364155;
color: #FFE;
}
li.is-active > a:before {
position: absolute;
content: "";
top: 8px;
right: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-left: none;
border-right-color: orange;
}
<div>
<h2><i class="fa"></i>About</h2>
<ul>
<li class="is-active">Our Beliefs
</li>
<li>Our Doctrines
</li>
<li>Our Constitution
</li>
<li>Our Leaders
</li>
<li>Our History
</li>
<li>Church Links
</li>
</ul>
</div>