css - 如何使用css制作带有切 Angular 的圆 Angular 矩形？

Question

我希望在 CSS 中创建一个可以优雅降级的矩形，以便在 IE8+ 中工作。在 Chrome、Firefox 和 Safari 浏览器中运行良好。

假设的 HTML 标签:FRETE GRÁTIS

查看示例: http://imageshack.us/photo/my-images/850/roundcutcorner.png/

谢谢

Answer 1

纯 CSS 解决方案

这是 jsFiddle example与原始图像和 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%);
}

假设 HTML 是:

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

陷阱

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