伪元素裁剪

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'.