CSS变换元素

Question

使用CSS transform属性，如何创建这样的按钮：

我尝试过skew，rotate，rotate3d和perspective但没有运气。感觉好像我需要成为一名数学家才能理解其中的一些新属性

Answer 1

你必须摆弄所有3个轴，然后倾斜。这是一个例子：

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;
}

这是一个现场演示：http://codepen.io/JosephSilber/pen/Jvohk/

Answer 2

有多种方法可以实现这种形状，请检查以下工具和方法：

图片地图：

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

描述：您上传普通图片并映射应该可点击的区域

---

图像掩码：

http://thenittygritty.co/css-masking

描述：您为要使用的图像创建自定义边框形状

---

SVG：

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

描述：使用html创建多边形矢量以获得所需的形状。