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

Answer 3

I wanted a simplified version of what was proposed here (without the hole effect and borders) but with the pointing side of it with rounded corner as well. So I came up with this solution . Visually this is what you get:

The HTML for it:

<div class="price-tag">Marketing</div>
<div class="price-tag">Sales</div>
<div class="price-tag">Inbound</div>

And the CSS for it:

.price-tag {
  background: #058;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 0.875rem;
  height: 30px;
  line-height: 30px;
  margin-right: 1rem;
  padding: 0 0.666rem;
  position: relative;
  text-align: center;
}
.price-tag:after {
  background: inherit;
  border-radius: 4px;
  display: block;
  content: "";
  height: 22px;
  position: absolute;
  right: -8px;
  top: 4px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  width: 22px;
  z-index: -1;
}
.price-tag:hover {
  background: #07b;
}

Answer 4

original example

Modified: http://jsbin.com/ruxusobe/1/

Basically, it needs to float left, use border-right (instead of left) and modify the padding.

CSS:

.guideList{
    font-size: 12px;
    line-height: 12px;
    font-weight: bold;
    list-style-type: none;
    margin-top: 10px;
    width: 125px;
}

.guideList li{
    padding: 5px 5px 5px 0px;
}

.guideList .active{
    background-color: #0390d1;
    color: white;
}

.guideList .activePointer{
    margin-top: -5px;
    margin-bottom: -5px;
    float: left;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 11px solid white;
    border-right: 11px solid transparent;
    border-bottom: 11px solid white;
}

HTML:

<ul class="guideList">
    <li><a>Consulting</a></li>
    <li class="active"><span class="activePointer"></span>Law</li>
    <li><a>Finance</a></li>
    <li><a>Technology</a></li>
</ul>

Answer 5

Here is a simple example...

Orignal Version

Edited Version

CSS:

div {
    margin-left: 15px;
    background: #76a7dc;
    border: 1px solid #CAD5E0;
    padding: 4px;
    width:50px;
    position: relative;
}
div:after {
    content:'';
    display: block;
    position: absolute;
    top: 2px;
    left: -1.3em;
    width: 0;
    height: 0;
    border-color: transparent #76a7dc transparent transparent;
    border-style: solid;
    border-width: 10px;
}

Notice on border-color , only right is set with a color and everything else is set to transparent.

Answer 6

using pseudo element and a little bit playing with border you can achieve the exact thing. Check the DEMO .

HTML code is :

<a class="arrow" href="#">Continue Reading</a>

CSS Code is:

body{padding:15px;}  
.arrow {
    background: #8ec63f;
    color: #fff;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    position: relative;
    border-radius: 4px;
    border: 1px solid #8ec63f;

    }
    .arrow:before {
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    }
    .arrow:before {
    border-bottom: 15px solid transparent;
    border-right: 15px solid #8ec63f;
    border-top: 15px solid transparent;
    left: -15px; 
    }

   .arrow:hover {
    background: #f7941d;
    color: #fff;
     border-radius: 4px;
    border: 1px solid #f7941d;
    }
    .arrow:hover:before {
    border-bottom: 15px solid transparent;
    border-top: 15px solid transparent;;
    border-right: 15px solid #f7941d;
    }