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

我希望在CSS中创建一个矩形，并在IE8+中运行。在Chrome、Firefox和Safari浏览器中也能正常工作

假定的HTML标记： 弗雷特·格里蒂斯

见示例：

---

Thank’s

一个有趣但可能不是最好的解决方案是使用绝对位置和z索引覆盖图像：）。你可以使用它（但除非你添加js来支持css3属性，否则它在IE8中不起作用）

与你需要的东西类似吗？ 这是它的代码

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

}`

试试这个：

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

对于IE8，我会使用纯CSS解决方案 以下是与原始图像和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>

FRETE GRÁTIS

戈查斯

• 要使其与较旧的（和其他）浏览器配合使用，您可能需要添加带前缀的

  border radius

• 要使其在非webkit/moz浏览器中工作，只需添加相应的前缀版本

  transform

  和

  transform origin

• “剪切”不能是透明的，但可以通过将其设置为与背景相同的颜色使其看起来是透明的
• 由于使用了

  边框半径

  ，您无法将

  div.cut

  的

  溢出

  设置为

  隐藏

  ，因为

  div

  的背景将沿半径的外边缘渗出，因此您必须确保元素外部有足够的空间，以避免覆盖其他元素/文本。解决方法是将背景设置为渐变，并使外边缘透明（也称为右侧）

---

如果您可以使用一个图像，您可以制作一个带有透明背景的简单白色三角形图像（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及以上版本中起作用，只是没有其他圆角。

此解决方案牺牲了双色背景/渐变。此外，您可能需要指出的是，它需要额外的资源（可能会在无意中移动/重命名，并在现代浏览器中导致方形角），而且更难更改（更改背景需要更改图像，而不仅仅是颜色代码）。将背景设置为渐变色或纹理颜色，span.tag:after有问题，因为它被设置为#fff color。有什么好办法吗？非常感谢。有两种可能的解决方案：1）使用纹理颜色作为

span.tag:after

的背景；2） 使用

溢出：隐藏span.tag

的背景足够接近，则

span.tag

上的code>on

；3） 将
span.tag:after
的背景设置为沿右侧透明的渐变（或者，如果您更大胆，设置两个在TL和BR角透明的渐变）；--几分钟后我可能会有一些其他的解决方案。
.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;
 }