将Div底部中心点设置为三角形

Question

这是我到目前为止所知道的：

​

.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>

​

我想知道--有没有可能改变active标签的样式，让它指向下方的中心，就像我在下面的样机中看到的那样？

​

​

我尝试实现本文中使用的向下三角形效果：

https://css-tricks.com/snippets/css/css-triangle/

将其作为::after添加到active选项卡中-那么为什么没有任何效果呢？

.active::after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent; 
  border-top: 20px solid #0B0E55;
}

我也尝试了类似的东西--我在这里找到了：Center Triangle at Bottom of Div

欢迎所有其他想法/建议！

Answer 1

您错过了after元素上的位置。

我在buck-knives-inner-nav-tab上添加了一个position: relative;，并在后面添加了一些更多的位置：

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>

​