造型剑道角度标签；活动选项卡下的箭头

Question

我想覆盖kendo angular tabstrip 的默认样式，最好采用遵循最佳实践的方式。现在，我正在使用::ng-deep 选择器，我知道这是不好的做法；但到目前为止无法找出不同的方法。看看我的stackblitz。

我也无法在活动标签下实现箭头。在上面的例子中，我想要一种方法来实现这一点：

显示在活动标签下方的白色小三角形/箭头。我认为纯 CSS 解决方案是最好的，但我对其他解决方案持开放态度。它需要位于所选选项卡的中心，无论其长度如何。请尝试使其在我提供的 stackblitz 中工作。谢谢。

Answer 1

您只能在 CSS 中使用活动 LI 上的 :after 伪元素来执行此操作。绘制三角形并定位它：

更新StackBlitz

li.k-state-active:after{
    content: '';
    position: absolute;
    z-index: 1000;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: -1px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    clear: both;
}