我正在尝试创建一个像这样的尖按钮:
到目前为止,我只能实现这一目标:
我认为增加水平边界半径会使它变得锐利,但它所做的一切只会使圆度更长。
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
);
}
你不想使用border-radius
因为这会为每个指定的角分配四分之一圆形状。相反,你可以用特定的方法来破解它border-width
属性,如本网站所示:http://www.howtocreate.co.uk/tutorials/css/slopes http://www.howtocreate.co.uk/tutorials/css/slopes
然而我觉得你解决问题的方式是错误的;您所做的最好使用背景图像来完成,这就是 iOS 风格的“后退”按钮在 iPhone-for web 样式表中的实现方式。如果您需要与分辨率无关的东西,那么您现在可以使用 SVG,而不会受到任何影响。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)