造型不规则形状的按钮

Question

是否可以创建一个有些不规则形状的按钮。

我的按钮有以下css，这使它成为一个简单的矩形。

.btnclass { 
   width:100; 
   height:40; 
}

但它希望看起来更像这样：

 ______________________
|           ___________|
|           |___________
|______________________|

用CSS完成这个任何聪明的想法吗？

Answer 1

我认为你不能，你最好使用你想要的形状

Answer 2

不是没有一堆CSS hackery，你最好的选择是使用图像。

如果您尝试使用表单按钮，请使用以下

<input type="image" src="image_path.png" alt="image description" />

Answer 3

使用图像按钮。 <input type="image" ... />或<button><img src="" /></button>如果没有，以下建议不是最佳选择，而是因为图片可能是最佳解决方案。

1. 设置具有所需形状的背景图像。我认为这是最纯粹的解决方案。 background-image: url(whole-image.png);

2. 设置背景颜色和位于右上角的小背景图像。解决方案类似于那里的“圆角黑客”。 background: #<button-color> url(small-image.png) top right no-repeat;