html - CSS 形状不符合预期。如何解决？

Question

在这段代码中，我试图得到一个符合我期望的形状。但我做不到？你能告诉我我哪里错了吗？为什么我的代码没有按预期工作。据了解，除标记 Nose 外，所有类(class)均正常工作。为什么我的标记 Nose 样式不能正常工作？你能指导我吗？

期望:

.hoarding_marker{
  cursor: pointer;
  transform: translateX(50%);
  -webkit-transform: translateX(50%);
}
.hoarding_marker_content{
    font-size:  12px;
    background-color: #697379;
    border: 1px solid #fff;
    border-radius: 2px;
    font-weight: 700;
    padding: 4px;
    color: #fff;
    min-width: 25px;
    text-align: center;
    white-space: nowrap;
}
.hoarding_marker_nose{
  height: 6px;
  width: 12px;
  border-radius: 100%;
  margin: 3px auto 0;
  background-color: rgba(0,0,0,.25);
}
.hoarding_marker_nose:before{
  margin-top: -3px;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  border: 6px solid #fff;
  border-color: #fff transparent transparent;
  border-width: 6px 6px 0;
  margin-left: -6px;
  left: 50%;
}
.hoarding_marker_nose:after{
  margin-top: -4px;
  border-color: #697379 transparent transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  border: 6px solid #fff;
  border-width: 6px 6px 0;
  margin-left: -6px;
  left: 50%;
}

<div class="hoarding_marker" style="position: absolute; z-index: 160; transition: opacity 0.4s ease 212ms; opacity: 1;">
  <div class="hoarding_marker_content">₹2,193</div>
  <div class="hoarding_marker_nose"></div>
</div>

Answer 1

将 border shorthand 属性更改为 border-style: solid 在 before 元素上并增加 z-index 以便它在气泡顶部可见。

.hoarding_marker{
  cursor: pointer;
  transform: translateX(50%);
  -webkit-transform: translateX(50%);
}
.hoarding_marker_content{
    font-size:  12px;
    background-color: #697379;
    border: 1px solid #fff;
    border-radius: 2px;
    font-weight: 700;
    padding: 4px;
    color: #fff;
    min-width: 25px;
    text-align: center;
    white-space: nowrap;
}
.hoarding_marker_nose{
  height: 6px;
  width: 12px;
  border-radius: 100%;
  margin: 3px auto 0;
  background-color: rgba(0,0,0,.25);
}
.hoarding_marker_nose:before{
  margin-top: -4px;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  border-style:solid;
  border-color: #697379 transparent transparent;
  border-width: 6px 6px 0;
  margin-left: -6px;
  left: 50%;
  z-index: 1;
}
   

<div class="hoarding_marker" style="position: absolute; z-index: 160; transition: opacity 0.4s ease 212ms; opacity: 1;">
  <div class="hoarding_marker_content">₹2,193</div>
  <div class="hoarding_marker_nose"></div>
</div>