Pseudo-element cropped - html

Question

I have no idea why my triangle pseudo-element gets cropped. I've been playing around the properties, but no result. It is supposed to be a classical triangle, where's my right angle?)
Please, help!
JSFiddle
<div id="slider">
<ul id="list">
<li>Eins</li>
<li>Zwei</li>
<li>Drei</li>
<li>Vier</li>
</ul>
</div>
#slider {
border: 1px solid #999;
position: relative;
width: 195px;
}
#slider:after {
content: " ";
border-bottom: 14px solid transparent;
border-left: 14px solid black;
border-top: 14px solid transparent;
height: 14px;
left: 190px;
position: absolute;
top: 20px;
width: 14px;
}

Answer 1

It doesn't get 'cut off'. Your element has height which elongates the left hand border:
Your arrow is more 'stretched' vertically than it is 'cut off' horizontally.
Ensure your element has no height to it:
#slider {
border: 1px solid #999;
position: relative;
width: 195px;
}
#slider:after {
content: " ";
border-bottom: 14px solid transparent;
border-left: 14px solid black;
border-top: 14px solid transparent;
/* ----- */
height: 0;
font-size: 0;
/* ----- */
left: 190px;
position: absolute;
top: 20px;
}
<div id="slider">
<ul id="list">
<li>Eins</li>
<li>Zwei</li>
<li>Drei</li>
<li>Vier</li>
</ul>
</div>
Also note your 'width' style is redundant. The triangle is created by the border and the content box itself is 'invisible'.