ios - 如何使用 CSS 使 div 的一侧变尖？

Question

我正在尝试创建一个像这样的尖按钮:

到目前为止，我只能做到这一点:

我认为增加水平 border-radius 会使它变得尖锐，但它所做的只是使圆度变长。

HTML

<a class="button">Back</a>

CSS

.button {
    display: inline-block;
    height: 3em;
    padding: 0 0.7em 0 1.4em;
    border: 0.1em solid black;
    border-radius: 3em 0.4em 0.4em 3em / 1.5em 0.4em 0.4em 1.5em;
    background: -moz-linear-gradient(
        top,
        #fff,
        #ccc
    );
}

Answer 1

您不希望使用 border-radius，因为它会将四分之一圆形状分配给每个指定的 Angular 。相反，您可以使用特定的 border-width 属性对其进行破解，如本网站所示:http://www.howtocreate.co.uk/tutorials/css/slopes

但是我觉得你解决问题的方式不对；你所做的最好使用背景图像，这就是 iOS 风格的后退按钮在 iPhone-for-web 样式表中的实现方式。如果您需要与分辨率无关的东西，那么您现在可以毫无损失地使用 SVG。