Style Bottom Center Point of Div as Triangle - html

Question

Here's what I have so far:
.buck-knives-inner-nav {
display: flex;
border: 1px solid #707070;
}
.buck-knives-inner-nav-tab {
text-align: center;
padding: 10px;
width: 100px;
}
.buck-knives-inner-nav-tab:not(:last-child) {
border-right: 1px solid #707070;
}
.active {
background-color: #0B0E55;
color: #ffffff;
}
/*
.active::after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0B0E55;
}*/
<div class="buck-knives-inner-nav">
<div class="buck-knives-inner-nav-tab active">
Hold Old is My Knife?
</div>
<div class="buck-knives-inner-nav-tab">
Knife Sharpening
</div>
<div class="buck-knives-inner-nav-tab">
Safety Tips
</div>
<div class="buck-knives-inner-nav-tab">
Knife Care
</div>
<div class="buck-knives-inner-nav-tab">
Choosing the Right Knife
</div>
<div class="buck-knives-inner-nav-tab">
Buck's Forever Warranty
</div>
</div>
I'm wondering - is it possible to style the active tab differently so that it points downward at the bottom center, like I have it in the following mockup?
I tried to implement the downward-facing triangle effect that's used in this article:
https://css-tricks.com/snippets/css/css-triangle/
adding it as an ::after to the active tab - so why didn't that have any effect?
.active::after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0B0E55;
}
Also tried something similar - what I found here: Center Triangle at Bottom of Div
All other ideas / suggestions are welcome!

Answer 1

You were missing the position on the after element.
I've added a position: relative; on the buck-knives-inner-nav-tab and some more positioning on the after:
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
.buck-knives-inner-nav {
display: flex;
border: 1px solid #707070;
}
.buck-knives-inner-nav-tab {
text-align: center;
padding: 10px;
width: 100px;
position: relative;
}
.buck-knives-inner-nav-tab:not(:last-child) {
border-right: 1px solid #707070;
}
.active {
background-color: #0B0E55;
color: #ffffff;
}
.buck-knives-inner-nav-tab.active:after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0B0E55;
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
}
<div class="buck-knives-inner-nav">
<div class="buck-knives-inner-nav-tab active">
Hold Old is My Knife?
</div>
<div class="buck-knives-inner-nav-tab">
Knife Sharpening
</div>
<div class="buck-knives-inner-nav-tab">
Safety Tips
</div>
<div class="buck-knives-inner-nav-tab">
Knife Care
</div>
<div class="buck-knives-inner-nav-tab active">
Choosing the Right Knife
</div>
<div class="buck-knives-inner-nav-tab">
Buck's Forever Warranty
</div>
</div>