html - 具有半径和箭头的 CSS 按钮，可能吗？

Question

我正在创建一个网站，我需要在同一个按钮上使用这两种样式。我需要在左侧有一个半径，右侧是一个箭头。我试过一些东西。例如老式的背景图像，它与箭头右对齐。将 web-kit 半径添加到效果不佳的按钮。

在过去，我会将按钮创建为背景图像。但是使用 CSS3 和一点魔法我确定有更好的方法来实现这个目标？

谁有解决问题的更简洁的方法？我有一个谷歌和一些咖啡但没有什么能完全做我想做的事情。

-我正在使用 bootstrap 2.3 有一个框架，所以这需要在尽可能多的浏览器和多屏分辨率下工作。

Answer 1

这可以通过使用 :before/:after 伪元素来实现。

jsFiddle here - 基本示例

HTML - 非常简单

<div></div>

CSS

div {
    width: 200px;
    height: 50px;
    background: black;
    position: relative;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

div:before {
    content: '\A';
    position: absolute;
    right: -20px;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 30px solid black;
    z-index: 10;
}

div:after {
    content: '\A';
    position: absolute;
    right: -30px;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 30px solid blue;
}