html - 将 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;
}

也尝试了类似的东西——我在这里找到的：Div 底部的中心三角形

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

标签： htmlcss

Answer 1

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

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

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>