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:

enter image description here

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?

A long time ago, I did a jquery plugin to display callouts without images: https://github.com/lepe/jquery-yacop . The trick is on the CSS. Give it a look and you may find what you need. (demo is here: http://yacop.alepe.com/callout.htm) — lepe, Aug 08 '14 at 03:15
You can do with pseudo elements like [**this**](http://jsfiddle.net/hari_shanx/L65oetvL/1/). If you want the triangle's border to have a darker color in screenshot then you should use transforms (rotate) unlike that linked answer which uses border hack. — Harry, Aug 08 '14 at 03:22
[**This**](http://jsfiddle.net/hari_shanx/L65oetvL/3/) sample is more similar to what you need. — Harry, Aug 08 '14 at 03:31

score 16 · Accepted Answer · edited May 23 '17 at 11:47

16

Want one that you can put over any background color?

simple Price tag shape in css, html

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:

enter image description here

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

edited May 23 '17 at 11:47

Community

1
1

answered Aug 08 '14 at 03:45

Roko C. Buljan

196,159
39
305
313

1

Oh I think this one is more appropriate but how can I make the width dynamic? So that it will contain the text inside – user3093453 Aug 08 '14 at 03:54
@user3093453 instead of `width` use: `padding: 0 25px 0 15px;` I'll edit my answer – Roko C. Buljan Aug 08 '14 at 03:56
The usage of the degree sign is really clever, but I almost wonder whether U+25CB WHITE CIRCLE `○` would be better. – icktoofay Aug 08 '14 at 04:03
@icktoofay In any case you don't have a font that has a white background and a gray border :( Your pick is just bigger than mine 'degree' `°` and it's harder to set a proper line-height. – Roko C. Buljan Aug 08 '14 at 04:09
@Roko: You might be able to fake it with U+25CF BLACK CIRCLE `●` with `color: white; text-shadow: 0 0 1px gray;`. – icktoofay Aug 08 '14 at 04:10
@icktoofay nice idea. let me try – Roko C. Buljan Aug 08 '14 at 04:11
@Roko: I ended up with [something that looked decent](http://jsbin.com/witasuku/2/edit). Still very mildly annoying that the tag doesn’t have a border on it, but I’m not sure much can be done without adding another element. – icktoofay Aug 08 '14 at 04:16
@RokoC.Buljan lastly how can I make the text to vertically align in the middle? Because when I add padding it does not seem to be good. – user3093453 Aug 08 '14 at 04:17
@icktoofay look at my edited answer. Should be brilliant. Thanks for the suggestions. – Roko C. Buljan Aug 08 '14 at 04:20
@RokoC.Buljan How bout adding some border on the arrow? Is it possible? – user3093453 Aug 08 '14 at 04:20
@Roko: Perhaps the last suggestion: you might want to turn some of the Unicode characters into escapes (e.g. `●` → `\25CF`) so if the browser guesses the text encoding wrong (say, UTF-8 misinterpreted as Latin-1) you won’t end up with some nonsense character like `â`. – icktoofay Aug 08 '14 at 04:23
@icktoofay please can you add all those info to my answer? It would be nice from you. – Roko C. Buljan Aug 08 '14 at 04:37
@user3093453 here's with the rounded arrow and some shadows: http://jsbin.com/lefuk/4/edit Happy coding – Roko C. Buljan Aug 08 '14 at 04:45
@RokoC.Buljan Do you know how to do this Sir? http://stackoverflow.com/questions/25394709/how-to-make-horizontal-line-with-arrow-using-css?noredirect=1#comment39607606_25394709 – user3093453 Aug 20 '14 at 01:23
This the most detailed and easily adaptable pure-CSS price-tag design solution I've found. Excellent. – Clarus Dignus Jan 04 '19 at 13:30

Harry · Answer 2 · 2015-10-10T11:29:25.033

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

How can I add padding on it? So that it will have some breathing room for the text? — user3093453, Aug 08 '14 at 03:50

score 1 · Answer 3 · answered Apr 15 '17 at 00:50

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

Just a heads up for others: if you place this inside an element (e.g. div) which has a background-color, you might be scratching your head as to why the triangle part is not showing. It is, but it's _behind_ the background, so it's obscured (because of the z-index: -1). Had me scratching my head for a while. — Erics, Oct 16 '17 at 03:20

score 0 · Answer 4 · answered Aug 08 '14 at 03:26

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>

score 0 · Answer 5 · edited May 23 '17 at 12:17

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.

Kheema Pandey · Answer 6 · 2014-08-08T03:45:13.253

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

@user3093453 This DEMO have fluid width. Only one drawback is there is circle not added at first. — Kheema Pandey, Aug 08 '14 at 04:04

How to create a pricetag shape in CSS and HTML

6 Answers6

If you want to add borders all around:

Linked