在材料設計選項卡底部添加三角形mat-ink-bar

Question

我想改變Angular材料選項卡的mat-ink-bar的樣式。

我想要達到這樣的設計： Jsfiddle的例子

問題是mat-ink-bar已經absolute定位，我無法顯示my ::after元素。 有什么方法可以達到這個目的嗎？

這是我在stackblitz 上嘗試的內容：stackblitz上的Mat選項卡

我的風格位於style.css 。 如果使用開發工具，底部的三角形將被隱藏。 我無法使用z-index顯示它。任何幫助將不勝感激。

這里的代碼：

CSS

.c-tab .mat-ink-bar {
  height: 5px;
}

.c-tab .mat-ink-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #3f51b5;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

HTML

<mat-tab-group class="c-tab">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

應該是這樣的：

Answer 1

更新以下css將解決您的問題。

.mat-tab-label {
  position: relative;
}
.mat-tab-header,
.mat-tab-label-container,
.mat-ripple {
  overflow: inherit !important;
}
.mat-ink-bar:after {
  content: "";
  position: absolute;
  top: 48px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: solid 20px #673ab7;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
}

結帳stackblitz

Answer 2

你缺少display:block for your ::after元素。 所以塊屬性不適用。 此外，您通過使用top ， left ， right和bottom來拉伸::after的寬度以匹配其父級。

位於左上角或右下角，而不是兩者

Answer 3

.c-tab .mat-ink-bar {
  position:relative
}

試試這個^^ ......

從理論上說，這就是你所需要的： updatet https://jsfiddle.net/Rakowu/e42wng0m/4/