create tag shape with css

Question

I'm trying to create a tag shape with the css only so that it looks like:

enter image description here

I'm trying following but unable to use the border for the triangle area.

HTML:

<a href="#">Test</a>

CSS:

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

a:before{
    content: "";
    position: absolute;
    top: -1px;
    right: -18px;
    width: 0;
    height: 0;
    border-color: white white white red;
    border-style: solid;
    border-width: 19px 0 18px 18px; 
}

JSFiddle: http://jsfiddle.net/Sac3m/

http://stackoverflow.com/questions/8875968/pure-css-triangle-with-semi-transparent-border-possible - use the final approach in the accepted answer. You need to use both `::before` and `::after` to get the border on your arrow. — CherryFlavourPez, Apr 16 '13 at 08:11
@CherryFlavourPez awesome, I had no idea that answer existed and the first attempt there looks eerily similar to what I did in mine :) — xec, Apr 16 '13 at 08:18

score 8 · Accepted Answer · edited Oct 19 '21 at 08:11

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>

(Latest IE, Firefox and Chrome seems OK with it)

Update

If you need IE8 support, you could try to put a white triangle on top of the (original) red triangle:

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

a:before {
  content: "";
  position: absolute;
  top: -1px;
  right: -18px;
  width: 0;
  height: 0;
  border-color: white white white red;
  border-style: solid;
  border-width: 19px 0 19px 19px;
}

a:after {
  content: "";
  position: absolute;
  top: 0;
  right: -17px;
  width: 0;
  height: 0;
  border-color: transparent transparent transparent white;
  border-style: solid;
  border-width: 18px 0 18px 18px;
}

<a></a>

Thanks, it looks nice but unfortunately it doesn't support IE8 which I need. — user966582, Apr 16 '13 at 08:33
Thanks. I have accepted the answer although it doesn't work in Opera. — user966582, Apr 16 '13 at 09:10
@user966582 Cheers. Just tested, and the first version works in Opera. You could supply the second solution through an ie-only stylesheet using conditional comments, for instance. — xec, Apr 16 '13 at 09:20

score 1 · Answer 2 · edited Nov 06 '21 at 11:37

The below code helps to create a tag shape. It works in all major browsers.

#swc {
  position: relative;
  margin: 0 5px 0 10px;
  display: inline-block;
  height: 66px;
  padding: 0 35px 0 20px;
  font-size: 25px;
  line-height: 65px;
  cursor: pointer;
  font-weight: 100;
  margin: 20px 25px;
  background: #f3f3f3;
  transition: background 0.3s;
}

#swc:after {
  position: absolute;
  content: "";
  right: -19px;
  width: 1px;
  height: 0px;
  border-left: 18px solid #f3f3f3;
  border-top: 33px solid transparent;
  border-bottom: 33px solid transparent;
  transition: border 0.3s;
}

#swc:hover {
  background: green;
  color: #ffffff;
}

#swc:hover:after {
  border-left-color: green;
}

<span class="pricetag-right" id="swc">Tag Content!</span>

score 0 · Answer 3 · edited Oct 19 '21 at 12:56

We had a slightly different implementation of this that produces rounded corners. This uses a rounded square that's turned 45°.

.tag {
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  border-color: #c8d7f2 transparent #c8d7f2 #c8d7f2;
  border-radius: .25em 0 0 .25em;
  padding: 0.1em 0.6em 0.1em 0.3em;
  background-color: #e5ecf9;
  line-height: 1.2em;
}

.tag:after {
  content: "\25CF";
  position: absolute;
  display: inline-block;
  height: 1.2em;
  width: 1.17em;
  transform: rotate(45deg);
  color: white;
  text-indent: 0.3em;
  line-height: 1em;
  text-shadow: 0 0 1px #333;
  background-color: #e5ecf9;
  border-radius: 0.33em 0.33em 0.33em 1em;
  border-width: 1px;
  border-style: solid;
  border-color: #c8d7f2 #c8d7f2 transparent transparent;
}

<h1 class="tag">my-tag</h1>

A couple things to note:

The square contains a circle punctuation mark. To adjust it you use line-height and text-indent.
The borders on the square need to be set to transparent color with a width of 1px. If you don't, the other borders (the visible ones) taper off where they go from 1px to 0px.
his works pretty well and it's nearly pixel-perfect, but it does render slightly differently across Chrome and Firefox. I tried to make it work with a transparent background, but you need some sort of color to cover up the funkiness where the square meets the tag. It's not quite perfect.

The nice thing about this is that it can be applied as a class and it can be used on H1-H6, or p tags.

create tag shape with css

3 Answers3

Update