0

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

5 Answers 5

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)
2
  • Setting the background to a gradient or textured color, we have a problem with span.tag:after because it is setted to #fff color. Any idea to fix it? Thank you!
    – Alexsandro
    Commented Feb 15, 2012 at 21:27
  • There are a couple possible solutions: 1) Use the textured color for the background of span.tag:after; 2) Use overflow:hidden; on span.tag if the texture/gradient is close enough in color to the background of span.tag for the very thin line along the border-radius to blend in; 3) Set the background of span.tag:after to a gradient that is transparent along the right side (or, if you're even more daring, two gradients that are transparent in TL and BR corners); --- I may have a couple other solutions in a few minutes.
    – 0b10011
    Commented Feb 15, 2012 at 22:05
1

a funny but probably not the best solution is to cover your image with triangle div using position-absolute and z-index :). To round your corners you can use border-radius (but it will not work in IE8 unless you add js to support css3 properties)

0

Is this fiddle something similar to what you need? Here is the code for it

`.tag.tag-gray {

    -webkit-border-radius: 5px;
    -webkit-border-top-right-radius: 300px;
    -moz-border-radius: 5px;
    -moz-border-radius-topright: 300px;
    border-radius: 5px;
    border-top-right-radius: 300px;

}`
0

Try this:

<div class="rounded">FRETE GRÁTIS<div class="tri"></div></div>

CSS:

.tri {
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-bottom: 20px solid transparent;
    border-right:20px solid #ffffff;
    position:absolute;
    top:0px;
    right:0px;   
}

.rounded {
font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 6px 20px;
    background: -moz-linear-gradient(
        top,
        #c0c0c0 0%,
        #333333);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#c0c0c0),
        to(#333333));
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 0px solid #000000;     
    width:120px;
    position:relative;
}

And for IE8, I'd use CSS3 PIE

0

If you're okay with using one image, you could make a simple white triangle image with a transparent background (PNG 24), then do something like this:

.tag-grey {
    background: grey url(triangle.png) no-repeat right top;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
     border-radius: 5px 0px 5px 5px;
 }

It's not pure css, but it uses a standard CSS method. The upshot is that this will work in IE7 and up, just without the other rounded corners.

1
  • This solution sacrifices the two-color background/gradient. Also, you might want to mention it requires an extra resource (which may be moved/renamed inadvertently and would result in a square corner in modern browsers) and is more difficult to change (changing background requires changing image, rather than just a color code).
    – 0b10011
    Commented Feb 15, 2012 at 21:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.