How to create a pricetag shape in CSS and HTML

Question

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?

Answer 1

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

Answer 2

Since the example image in the question has extra outer borders, achieving it with the border trick will involve multiple (pseudo) elements and will become complex (because in addition to the arrow shape, a circle is also needed in front). Instead, the same could be achieved by using transform: rotate() like in the below sample.

The approach is pretty simple and as follows:

• The parent div container houses the text that should be present within the price-tag shape.
• The :after pseudo-element has transform: rotate(45deg) and produces the triangle shape. This is then positioned absolutely with respect to the left edge of the parent. The background set on the pseudo-element prevents the left border of the parent container from being visible.
• The :before pseudo-element forms the circle present on the left side (using border-radius).
• The X mark at the end is added using a span tag and the × entity.
• The parent div container's width is set to auto so that it can expand based on the length of the text.

Note: This sample uses transforms, so will require polyfills in lower versions of IE.

div {
  position: relative;
  display: inline-block;
  width: auto;
  height: 20px;
  margin: 20px;
  padding-left: 15px;
  background: #E8EDF2;
  color: #888DA3;
  line-height: 20px;
  border-radius: 4px;
  border: 1px solid #C7D2DB;
}
div:after,
div:before {
  position: absolute;
  content: '';
  border: 1px solid #C7D2DB;
}
div:after {  /* the arrow on left side positioned using left property */
  height: 14px;
  width: 14px;
  transform: rotate(45deg);
  background: #E8EDF2;
  border-color: transparent transparent #C7D2DB #C7D2DB;
  left: -6px;
  top: 2px;
}
div:before {  /* the circle on the left */
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background-color: white;
  left: 0px;
  top: 7px;
  z-index: 2;
}
.right {  /* the x mark at the right */
  text-align: right;
  margin: 0px 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Home<span class='right'>&times;</span>
</div>
<div>Home Sweet Home<span class='right'>&times;</span>
</div>
<div>Hi<span class='right'>&times;</span>
</div>

Fiddle Demo