纯CSS解决方案

Question

我希望在CSS中使用一个带有优雅降级的矩形来在IE8 +中工作。并且可以在Chrome，Firefox和Safari浏览器中正常使用。

提供的HTML标记：＆lt; span class =“tag tag-grey”＆gt;FRETEGRÁTIS＆lt; / span＆gt;

参见样本： http://imageshack.us/photo/my-images/850/roundcutcorner.png/

感谢的

Answer 1

一个有趣但可能不是最好的解决方案是使用position-absolute和z-index :)覆盖triangle div的图像。要绕过你的角落你可以使用border-radius（但除非你添加js以支持css3属性，否则它在IE8中不起作用）

Answer 2

纯CSS解决方案

这是与原始图像和CSS比较的jsFiddle example：

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%);
}

假设HTML为：

<span class="tag tag-gray">FRETE GRÁTIS</span>

陷阱

要使其与旧版（和其他）浏览器一起使用，您可能需要添加border-radius的前缀版本
要使其在非webkit / moz浏览器中运行，只需添加相应的前缀版transform和transform-origin
“剪切”不能透明，但您可以将其设置为与背景颜色相同
由于使用了border-radius，您无法将div.cut的{{1}}设置为overflow，因为hidden的背景会沿着外边缘渗出半径，所以你必须确保你在元素之外有足够的空间，以避免覆盖其他元素/文本。解决方法是将背景设置为渐变并使外边缘透明（也称为右侧）

Answer 3

this fiddle类似于你需要的东西吗？这是它的代码

`.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;

}`

Answer 4

试试这个：

<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;
}

对于IE8，我会使用CSS3 PIE

Answer 5

如果您对使用一张图片感到满意，可以制作一个带有透明背景的简单白色三角形图像（PNG 24），然后执行以下操作：

.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;
 }

它不是纯 css，但它使用标准的CSS方法。结果是这将在IE7及更高版本中运行，只是没有其他圆角。

如何使用css制作带切角的圆角矩形？

5 个答案:

纯CSS解决方案

陷阱