带有Radius和Arrow的CSS按钮可能吗？

Question

我正在创建一个网站,我需要在同一个按钮上同时使用这两种样式.我需要左手边的半径,右手边是箭头.我尝试了一些事情.例如,老式的背景图像与箭头对齐.将Web工具箱半径添加到按钮,该按钮无法正常工作.

在过去,我会将按钮创建为背景图像.但是使用CSS3和一些魔术我确信有更好的方法来实现这一目标吗？

任何人都有一个更清洁的解决方案？我有一个谷歌与一些咖啡的但没有什么是我想要做的.

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

Answer 1

这可以通过使用:before/ :afterpseudo元素来实现.

jsFiddle这里 - 基本的例子

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;
}