Question

I wish do a rectangle in CSS with graceful degradation to work in IE8+. And work fine in Chrome, Firefox and Safari browsers.

Supposed HTML Tag:
<span class=”tag tag-gray”>FRETE GRÁTIS</span>

See sample:
http://imageshack.us/photo/my-images/850/roundcutcorner.png/

Thank’s

Answer 1

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)