CSS形状不符合预期。怎么解决？

Question

在这段代码中，我正在尝试使形状符合我的期望。但是我做不到吗？你能告诉我我哪里错了。为什么我的代码无法按预期工作。据了解，除标记鼻外，所有课程均能正常工作。为什么我的标记鼻样式无法正常工作？你能指导我吗？

期望：

.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

请使用以下代码：

.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;
    position: relative;
    display:inline-block;
}
.hoarding_marker_content:after {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: '';
    border-top: 8px solid #697379;
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

    <div class="hoarding_marker_content">₹2,193</div>

Answer 2

将border shorthand属性更改为border-style：在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>

Answer 3

尝试此代码，就像您期望的那样。

.hoarding_marker{
  cursor: pointer;
  transform: translateX(50%);
  -webkit-transform: translateX(50%);
}
.hoarding_marker_content{
    font-size:  12px;
    background-color: #697379;
    border-top: 3px solid #dccfcf;
    border-right: 3px solid #dccfcf;
    border-bottom: 8px solid #dccfcf;
    border-left: 3px solid #dccfcf;
    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;
}
.hoarding_marker_nose:before{
  margin-top: -11px;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  border: 6px solid #697379;
  border-color: #697379 transparent transparent;
  border-width: 6px 6px 0;
  margin-left: -6px;
  left: 50%;
  z-index: 1;
}
.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>