Styling eines Knopfes in unregelmäßiger Form

Question

Ist es möglich, einen etwas unregelmäßig geformten Knopf zu erstellen.

Meine Schaltfläche hat die folgenden CSS, die es zu einem einfachen Rechteck macht.

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

aber es soll eher wie dieses aussehen:

______________________ 
|   ___________| 
|   |___________ 
|______________________| 

Irgendwelche cleveren Ideen diese mit CSS zu erreichen?

Answer 1

Ich glaube nicht, Sie können, Ihr besser dran, ein Bild verwenden, wie Sie

Answer 2

Nicht wirklich wollen geformt ist, ohne ein Bündel von CSS-Hacks, die beste Wahl ist, Bilder zu verwenden.

Wenn Ihr so ​​für Form-Tasten zu tun versuchen, suchen die folgende

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

Answer 3

Gehen Sie mit einem Bild Button verwenden. <input type="image" ... /> oder <button><img src="" /></button> Wenn nicht, sind die folgenden Vorschläge nicht optimal, aber das ist, weil ein Bild wahrscheinlich die optimale Lösung ist.

1. Einstellung eines Hintergrundbildes mit der gewünschten Form. Ich denke, das ist die reinste Lösung. background-image: url(whole-image.png);

2. Einstellung einer Hintergrundfarbe und eines kleinen Hintergrundbildes in der oberen rechten Ecke. Die Lösung ist etwas Ähnliches wie der "Rounded-Corner-Hack". background: #<button-color> url(small-image.png) top right no-repeat;