html - 如何在 CSS 和 HTML 中创建价格标签形状

Question

所以我找到了这个答案 - CSS3 menu shape, style但不知道如何把它放在左边。我已经搜索过了，但没有找到。

这就是我要实现的目标:

我也找到了这个 - Change the shape of the triangle .我怎样才能让它在对面工作？我的意思是箭头需要在左侧。是否可以用一个 div 来做到这一点？

Answer 1

想要一个可以覆盖任何背景颜色的颜色吗？

jsBin demo

只有这个 HTML:

<span class="pricetag"></span>

还有这个 CSS:

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 0 solid #C7D2D4;
    border-top-width:1px;
    border-bottom-width:1px;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #333;
    font-size:11px;
    line-height:0px;
    text-indent:12px;
    left:-15px;
    width: 1px;
    height:0px;
    border-right:14px solid #E8EDF0;
    border-top:  13px solid transparent;
    border-bottom:  13px solid transparent;
}

基本上遵循这个原则:How to create a ribbon shape in CSS

---

如果你想在四周添加边框:

jsBin demo with transform: rotate(45deg) applied to the :before pseudo

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 1px solid #C7D2D4;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    background:#E8EDF0;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #aaa;
    font-size:12px;
    line-height:13px;
    text-indent:6px;
    top:3px;
    left:-10px;
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
    border-left:1px solid #C7D2D4;
    border-bottom:1px solid #C7D2D4;
}