How to Create a Pricetag Shape in CSS and HTML

How to create a pricetag shape in CSS and HTML

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 - create a dynamic tag shape facing to the right

You just need to position the arrow according to the right side of the tag with the right property instead of the left property :

.pricetag {

  position: relative;

  margin: 0 5px 0 10px;

  display: inline-block;

  height: 46px;

  padding: 0 35px 0 15px;

  background: #E8EDF0;

  font-size: 20px;

  line-height: 41px;

}

.pricetag:before {

  position: absolute;

  content: "";

  left: -15px;

  width: 1px;

  height: 0px;

  border-right: 14px solid #E8EDF0;

  border-top: 23px solid transparent;

  border-bottom: 23px solid transparent;

}

/**********/

.pricetag-right {

  position: relative;

  margin: 0 5px 0 10px;

  display: inline-block;

  height: 46px;

  padding: 0 35px 0 15px;

  background: #E8EDF0;

  font-size: 20px;

  line-height: 41px;

}

.pricetag-right:before {

  position: absolute;

  content: "";

  right: -15px;

  width: 1px;

  height: 0px;

  border-left: 14px solid #E8EDF0;

  border-top: 23px solid transparent;

  border-bottom: 23px solid transparent;

}

<span class="pricetag">no problem with long or short text (length auto adjusts)</span>

<br>

<br/>

<span class="pricetag-right">need to create a new class for each length</span>

<br/>

<br/>

<span class="pricetag-right">need to create a nqsdqsdqsdqsdqsdqsdew class for each length</span>

How do I adjust triangle in css price tag to the right size

check it out, DEMO

.pricetag:before{
    position:absolute;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #333;
    font-size:11px;
    line-height:0px;
    text-indent:12px;
    left:-42px; // <-- increase this
    top: 0; // <-- add this
    width: 1px;
    height:0px;
    border-right:41px solid #E8EDF0;
    border-top:  43px solid transparent;
    border-bottom:  43px solid transparent;
}

how to create a pricetag like border around list items

Here's a solution that works with a background image sprite. In a nutshell, I'm using the tag for the entire "price tag" shape (easier for the user to click on), and a background sprint for the hover/active state. I'm also wrapping the "quantity" number in a span tag.

Solution Example: http://jsfiddle.net/alexroper/zhrwA/34/

Here is the HTML for the "price tag" list:

<ul id="filters-slider" class="filters-list">
  <li><a href="#">Darling</a> <span class="tag-qty">103</span></li>
  <li class="active"><a href="#">Online Audience</a> <span class="tag-qty">9</span</li>
  <li><a href="#">Digital Strategy</a> <span class="tag-qty">20</span></li>
</ul>

Here are the styles that build that "price tag" :

ul.filters-list {
  text-align: center;
  white-space: nowrap;
  display: inline-block;
  padding-top: 10px;
}
ul.filters-list > li {
  color: #666666;
  font-weight: bold;
  float: left;
  list-style-type: none;
  line-height: 26px;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
}
ul.filters-list > li > a {
  color: #666666;
  padding: 0 18px 0 24px;
  background: url('https://www.dropbox.com/s/n8e74eikwf82vks/tag_sprite.png?raw=1') 0 0 no-repeat;
  border-right: 1px solid #ccc;
  display: block;
}
ul.filters-list > li > a:hover,
ul.filters-list > li.active > a {
  text-decoration:none;
  background-position: 0 -30px;
}

And these styles create the "quantity" number:

.filters-list .tag-qty {
  position: absolute;
  top: -8px;
  right: -9px;
  border: 1px solid #bbb;
  line-height: 16px;
  display: inline-block;
  padding: 0 5px;
  background: #fff;
  -webkit-border-radius: 9px;
          border-radius: 9px;
     -moz-background-clip: padding; 
  -webkit-background-clip: padding-box; 
          background-clip: padding-box;
  -webkit-box-shadow: 0px 0px 3px 0px #ccc;
          box-shadow: 0px 0px 3px 0px #ccc;
}
.filters-list .active .tag-qty {
  background:#ebebeb;
}

create tag shape with css

You could rotate a square instead, although i doubt the results will be great cross-browser

Modified code:

a {
  float: left;
  height: 35px;
  position: relative;
  border: 1px solid red;
  border-right: none;
  width: 100px;
}

a:after {
  content: "";
  position: absolute;
  top: 4px;
  right: -13px;
  width: 25px;
  height: 25px;
  border: 1px solid red;
  border-left: none;
  border-bottom: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

<a></a>

How to create a ribbon shape in CSS

Ribbon shape using CSS Clip Path:

.bookmarkRibbon {
  width: 100px;
  height: 60px;
  background: blue;
  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 20px) 50%, 100% 100%, 0% 100%);
}

<div class="bookmarkRibbon"></div>

How to code certain css shapes?

Yes; you can do this with pure CSS & with gradient also.

Check this http://jsfiddle.net/9EEEP/3/

with border & circle http://jsfiddle.net/9EEEP/2/

you can adjust the css as per your requirement like this http://jsfiddle.net/9EEEP/5/

Change the shape of the triangle

Change the border-left on .guideList .activePointer to something like 7px instead of 11... the more you drop that value, the wider the angle will get.

.guideList .activePointer{
    margin-top: -5px;
    margin-bottom: -5px;
    float: right;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 11px solid white;
    border-left: 7px solid transparent;
    border-bottom: 11px solid white;
    -webkit-transform: rotate(0.05deg); // added to smooth edges in Chrome
}

CSS3 menu shape, style

@harry; there are lot of ways to create this type of triangles arrows. I edit @jam fiddle & center the arrows.

CSS:

div
{
    background: #76a7dc;
    padding: 10px;
    display: inline;
    position:relative;
}

div:after
{
    border-color: #76a7dc transparent;
    border-style: solid;
    border-width: 10px 10px 0;
    content: "";
    margin-top: 5px;
    display: block;
    position: absolute;
    width: 0;
    margin-left:-10px;
    left:50%;
    bottom:-9px;
}

check this example http://jsfiddle.net/sandeep/wWykY/2/

---

Related Topics