Pure CSS Solution
Here's the jsFiddle example with comparison to original image and the CSS:
span.tag {
margin:4px 5px;
position:relative;
border-radius:5px;
background:red;
display:inline-block;
padding:.6em 4.5em;
text-align:center;
}
span.tag-gray {
background: #7c7d80; /* Old browsers */
background: -moz-linear-gradient(top, #7c7d80 0%, #7c7d80 50%, #66686b 51%, #66686b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c7d80), color-stop(50%,#7c7d80), color-stop(51%,#66686b), color-stop(100%,#66686b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* IE10+ */
background: linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c7d80', endColorstr='#66686b',GradientType=0 ); /* IE6-9 */
color:#fff;
font-family:sans-serif;
font-size:.7em;
font-weight:bold;
}
span.tag:after {
/* right, height, and width should equal eachother */
right:-18px;
height:18px;
width:18px;
content:".";
display:block;
position:absolute;
top:0;
font-size:0;
overflow:hidden;
background:#fff;
-moz-transform-origin:0 0;
-moz-transform:rotate(-45deg) translate(-50%, -50%);
-webkit-transform-origin:0 0;
-webkit-transform:rotate(-45deg) translate(-50%, -50%);
transform-origin:0 0;
transform:rotate(-45deg) translate(-50%, -50%);
}
Assuming the HTML is:
<span class="tag tag-gray">FRETE GRÁTIS</span>
Gotchas
- To get it to work with older (and other) browsers, you may want to add the prefixed versions of
border-radius
- To get it to work in non-webkit/moz browsers, simply add the corresponding prefixed versions of
transform
and transform-origin
- The "cut" cannot be transparent, but you can make it appear to be by setting it to the same color(s) as the background
- Due to using
border-radius
, you cannot set div.cut
's overflow
to hidden
as the div
's background will bleed through along the outer edge of the radius, so you have to make sure you have enough room outside of the element to avoid covering other elements/text. A workaround is to set the background to a gradient and have the outer edge be transparent (aka right side)