如何使CSS的一方尖锐的指向？

我试图创build一个像这样的尖尖的button：

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

我认为增加水平的边界半径会使它变得尖锐，但是这样做会使圆度变长。

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

经过更多的思考，这是一个更优雅的解决scheme，它允许更有效的样式和只使用一个HTML元素。 使用这种方法，我们可以完全在您的概念中实现结果。

HTML

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

CSS

 a.button { text-decoration:none; color:#111; text-shadow:0 1px 0 #fff; font-weight:bold; padding:10px 10px; font-size:14px; border-radius:0 8px 8px 0; -webkit-border-radius:0 8px 8px 0; float:left; margin-left:30px; margin-top:20px; position:relative; font-family:verdana; color:#3b3d3c; border:1px solid #666; border-left:0; background: -moz-linear-gradient( top , #eee 0%,#bbb 100%); background: -webkit-linear-gradient( top , #eee 0%,#bbb 100%); } a.button:after { content:""; width:25px; height:25px; background: -moz-linear-gradient( left top , #eee 0%,#bbb 100%); background: -webkit-linear-gradient( left top , #eee 0%,#bbb 100%); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); display:block; position:absolute; top:5px; left:-14px; z-index:-1; border:1px solid #666; } @media screen and (-webkit-min-device-pixel-ratio:0) { a.button:after{ border-left:0; left:-13px; } 

最后一条规则适用于Chrome，否则会使结果略有不同。

希望这可以帮助。

Answer 2

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

但是我觉得你正在用错误的方式解决问题。 你所做的最好的做法是使用背景图像，这就是在iPhone-for-web样式表中如何实现iOS风格的后退button。 如果你需要一些独立的解决scheme，那么你现在可以使用SVG而不会受到惩罚。

Answer 3

您可以使用包含在锚标记中的2个元素并排创build这种效果。

 <style type="text/css"> .arrow-left { width:0; height:0; border-top:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid orange; float:left; } .button { float:left; height:60px; background:orange; width:50px; line-height:60px; font-weight:bold; border-top-right-radius:8px; border-bottom-right-radius:8px; } </style> <a href='#'><div class="arrow-left"></div><div class="button">Back</div></a> 

我不确定它是否是最精致的解决scheme，但它看起来与您的概念艺术和function是一致的。