自定义边框 - CSS

Question

有没有办法在css上实现这个自定义边框？我尝试使用border-radius但是直到现在我才找到解决方案...黑色部分表示我希望边框看起来像

我的问题是我需要从底角到行的直线。

Answer 1

保证在所有浏览器中工作？使用图像。通过CSS，快速和肮脏，你可以做这样的事情，不知道浏览器兼容性

.arrow-left {
    border-left: 50px solid transparent;
    border-top: 20px solid black;
}
.arrow-right {
    border-right: 50px solid transparent;
    border-top: 20px solid black;
}

http://jsfiddle.net/2Z2ka/1/

Answer 2

你可以使用这样的东西：

DEMO

div{
    width: 300px;
    height: 50px;
    background: #333;
    border-radius: 3px;
    border-bottom-right-radius: 100px 50px;
    border-bottom-left-radius: 100px 50px;
}

Answer 3

您可能想尝试不同的方法，这是DIV开始和结束的背景。这将是以gif / png格式保存的三角形。

此外，如果div具有固定大小，它很可能是单个图像文件（也是gif / png，因为它必须是透明的）。

通过这种方式，您可以确保所有浏览器都支持您的解决方案，而CSS技巧则不太可能。 （我主要担心IE 7.0 / 8.0）