css - 带有光滑圆 Angular 的箭头按钮

Question

我想创建一个“下一步按钮”，它的右 Angular 是一个箭头并且圆 Angular 平滑。

我怎样才能像这张图片那样创建一个带有平滑圆 Angular 的箭头按钮(并制作所有这些效果)？

这是我的尝试(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 进行操作和动画化……而且非常易于使用。