样式 kendo angular 选项卡；活动选项卡下的箭头

Question

我想覆盖 kendo angular tabstrip, ideally in a way that follows best practices. Right now, I'm using ::ng-deep selectors, which I know is bad practice; but so far can't figure out a different way. Check out my stackblitz 的默认样式。

我在活动选项卡下实现箭头时也遇到了问题。在上面的示例中，我想要一种实现此目的的方法：

出现在活动标签下的白色小 triangle/arrow。我认为纯 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;
}

样式 kendo angular 选项卡；活动选项卡下的箭头

Styling kendo angular tabs; arrow under active tab

css

css-selectors

kendo-ui

kendo-ui-angular2

angular