css - CSS 变换元素

Question

使用 CSStransform属性，我如何制作这样的按钮：

我试过玩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 创建多边形矢量以实现所需的形状。