CSS Transform Element

Question

Using the CSS transform property, how can I make a button like this:

I've tried playing with skew, rotate, rotate3d and perspective without luck. It feels as if I need to be a mathematician to understand some of these new properties

Answer 1

You'll have to fiddle with rotating along all 3 axes, and skewing. Here's an example:

div {
    perspective: 200px; 
    width: 150px;
    position: relative;
    color: white;
    line-height: 2.4;
    text-align: center;
    padding-left: 20px;
}

div::before {
    content: '';
    z-index: -1;
    position: absolute;
    background: #7fc552;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: skew(-9deg) rotateX(-22deg) rotateY(-21deg) rotateZ(-9deg);
    /* Firefox seems to render this with pretty bad jagged edges.
       Add a transparent outline to fix that. */
    outline: 1px solid transparent;
}

Here's a live demo: http://codepen.io/JosephSilber/pen/Jvohk/

Answer 2

There are different ways to achieve this shape, check the following tools and ways:

Image map:

http://www.maschek.hu/imagemap/imgmap

Descriptiom: you upload a normal picture and you map the area where it should be clickable

---

Image mask:

http://thenittygritty.co/css-masking

Description: you create custom border shapes for the image you want to use

---

SVG:

http://www.w3schools.com/svg/svg_polygon.asp

Description: you create polygon vector with html to achieve the shape desired.