带有光滑圆角的箭头按钮

Question

我想创建一个“下一个按钮”，其中右角是一个箭头，角落是圆滑的。

如何创建一个带有光滑圆角的箭头按钮，如图所示（并制作所有这些效果）？

这是我的尝试（JSFiddle）：

.arrow_btn {
    position: relative;
    background: #fa963e;
    border: 3px solid #f5a742;
    border-radius: 5px; 
}
.arrow_btn:after{
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    border-radius: 5px;    
}
.arrow_btn:after {
    border-color: rgba(250, 150, 62, 0);
    border-left-color: #fa963e;
    border-width: 14px;
    margin-top: -14px;
    border-radius: 5px;    
}

看起来像这样：

Answer 1

这种事情真的应该用SVG来完成，而不是CSS。

CSS非常适合它的设计 - 页面布局。当你开始尝试使用它绘制图形时，它很糟糕。它可以很容易地做基本的东西，这让人们认为它可以做任何事情......好吧，是的，它可以，但它很快变得丑陋。

SVG专门用于绘制图形，并且非常擅长。它可以直接嵌入到您的页面中，也可以像任何其他图像一样单独嵌入。它是可扩展的，可以通过javascript进行操作和动画制作......而且它很容易使用。