伪元素裁剪

时间:2015-02-19 21:22:06

标签: html css pseudo-element

我不知道为什么我的三角形伪元素会被裁剪掉。我一直在玩这些房产,但没有结果。它应该是一个经典的三角形,我的直角?) 请帮忙! 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;
 }

1 个答案:

答案 0 :(得分:4)

它不会被“切断”。你的元素有高度拉长左边界:

enter image description here

你的箭头比水平“切断”的箭头更“拉伸”。

确保您的元素没有高度:

#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>

另请注意,您的“宽度”样式是多余的。三角形由边框创建,内容框本身是“不可见的”。