Question

我对css不太好。我的情景：

我试图在活动列表项上使用css三角形。

<div class="bx-viewport"> <!-- this div has overflow:hidden for need. -->
  <ul class="nav nav-tabs nav-tabs-noborder bxslider">
    <li> <!-- css triangle when the item is active -->
      ... <!-- some text -->
    </li>
  </ul>
</div>

列出css：

.nav-tabs-noborder > li.active:after {
  width: 0; 
  height: 0; 
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fff;
  content: '';
  z-index: 999;
  position: absolute;
  left: 40%;
  bottom: -22px;
}

div.bx-viewport css：

width: 100%;
overflow: hidden;
position: relative;

如果删除溢出隐藏，三角形才有效。但在这种情况下，我无法做到。有解决方案/解决方法吗？

PS：我正在使用bxSlider。

在我需要的打印件下方并显示css属性。（删除溢出隐藏）

http://i.imgur.com/iOl8FiX.png

Answer 1

试试这个：

.nav-tabs-noborder > li.active:after {
  content: '▼';
  z-index: 999;
  position: absolute;
  left: 40%;
  bottom: -22px;
  color: white;
  font-size: 20px;
}

您可以使用font-size，color等设置向下三角形的样式，并使用margins正确定位。

Answer 2

我使用这些规则来创建一个三角形。你可以尝试：

.triangle{    
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 7px 0 7px;
  border-color: #ffffff transparent transparent transparent;
}

Answer 3

如果你可以在div.bx-viewport上删除position: relative;，那么应取消隐藏你的三角形。 bottom: -22px;会将其移到视口底部以下，因此您必须向下滚动才能看到它。

CSS - 溢出隐藏打破css三角形

3 个答案: