我不知道为什么我的三角形伪元素会被裁剪掉。我一直在玩这些房产,但没有结果。它应该是一个经典的三角形,我的直角?) 请帮忙! 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;
}
答案 0 :(得分:4)
它不会被“切断”。你的元素有高度拉长左边界:
你的箭头比水平“切断”的箭头更“拉伸”。
确保您的元素没有高度:
#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>
另请注意,您的“宽度”样式是多余的。三角形由边框创建,内容框本身是“不可见的”。