在这段代码中,我试图得到一个符合我期望的形状。但我做不到?你能告诉我我哪里错了吗?为什么我的代码没有按预期工作。据了解,除标记 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>
最佳答案
将 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>
关于html - CSS 形状不符合预期。如何解决?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54460111/