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

我希望在CSS中创建一个矩形，并在IE8 +中正常运行。并且可以在Chrome，Firefox和Safari浏览器中正常运行。假定的HTML标签： FRETEGRÁTIS查看示例：http://imageshack.us/photo/my-images/850/roundcutcorner.png/谢谢 (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 纯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的背景会沿着半径的外边缘渗出，因此必须确保有足够的空间在元素外部留出空间以避免覆盖其他元素/文本。一种解决方法是将背景设置为渐变并使外部边缘透明（又称右侧） (adsbygoogle = window.adsbygoogle || []).push({});