CSS 变换元素答案

【问题标题】：CSS Transform ElementCSS 变换元素
【发布时间】：2014-04-06 15:30:24
【问题描述】：

使用 CSS transform 属性，如何制作这样的按钮：

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

【问题讨论】：

为什么在 css 中需要它？
因为网站上有多个元素使用不同宽度和高度的相似变换
为什么不使用 SVG 图片？
好主意乔尔。我可能不得不求助于它，但如果可能的话我想避免它，因为设计师已经对网站的每个块元素进行了转换，所以有很多不同的背景颜色等

【解决方案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/

【讨论】：

这太棒了！我也可以使用它来获得其他元素所需的效果。非常感谢约瑟夫

【解决方案2】：

有不同的方法来实现这个形状，检查以下工具和方法：

图片地图：

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

描述：你上传一张普通图片，然后你映射出应该可以点击的区域

图像蒙版：

http://thenittygritty.co/css-masking

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

SVG：

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

说明：您使用 html 创建多边形矢量以实现所需的形状。

【讨论】：