如何实现像这样的曲线？

Question

我正在创建一个新网站，我希望重新创建SAVE 25％横幅的弯角。 http://www.sonycreativesoftware.com/

有谁知道我会用css或html做到这一点？

干杯

Answer 1

将图片用作background-image，并在元素

上应用border-radius

div
{
    background-image:url('http://placehold.it/350x150');
    width:350px;height:150px;
    border-radius:5px;
}​

http://jsfiddle.net/mdNCm/1/

---

您可以使用border-radius.com生成跨浏览器CSS

Answer 2

是的，使用border-radius。

CSS：

div.rounded{
    border-radius: 5px;
    border: 1px solid black;
}

HTML：

<div class="rounded">This text is in a rounded border!</div>

Answer 3

这是一项css3功能，尚未完全支持所有浏览器。进一步了解此标签：

border-radius: 25px;

Answer 4

你可以实现这一目标 border-radius：5px;

如果你想要一个走投无路的边框，请使用它。 Border-radius.com 这给了你代码。

注意：border-radius不适用于某些浏览器，例如

或者，你可以在css中使用一些图像作为背景。