如何在CSS和HTML中创建pricetag形状 [英] How to create a pricetag shape in CSS and HTML

问题描述

因此，我发现这个答案 - 。如何使它在相反的一面工作？我的意思是箭头需要在左边。是否可以使用 div ？

解决方案

strong>想要可以覆盖任何背景颜色吗？

  .pricetag {
 white-space：nowrap; 
 position：relative; 
 margin：0 5px 0 10px; 
 placement：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; 
} 
  

So I've found this answer - CSS3 menu shape, style but have no idea on how to put it on the left side. I've searched for it already but with no luck.

This is what I'm trying to achieve:

And I've found this one also - Change the shape of the triangle. How can I make it work on the opposite side? I mean the arrow needs to be on the left side. And is it possible to do this with one div?

解决方案

Want one that you can put over any background color?

jsBin demo

Only this HTML:

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

And this 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;
}

which basically follows this principles: How to create a ribbon shape in CSS

---

If you want to add borders all around:

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

这篇关于如何在CSS和HTML中创建pricetag形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！