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

Question

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

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

有人有更清洁的解决方案吗？我用谷歌搜索了几杯咖啡，但没有什么能完全满足我想要做的。

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

Answer 1

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

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

Answer 2

我修改了上面的代码以实现您想要的目标：与您的图片完全相同

HTML

<div id="div1"></div>
<div id="div2"></div>

CSS

body  { 
   background: blue; 
}

#div1 {
   width: 200px;
   height: 50px;
   background: black;
   position: relative;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   z-index: 9;
}

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

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

#div2 {
   width: 20px;
   height: 50px;
   background: white;
   left: 196;
   top: 8;
   position: absolute;
}