在网页设计中处理拼图菜单的最简单方法

Question

我有2个基本的想法如何执行我的设计，我的问题是哪个更好，然后在CSS中摆弄动画等等给我更多自由。

那将是一个导航菜单，将鼠标悬停在其中一个菜单上将使其更大。

---

2个想法：

1. CSS剪切路径：多边形工具。 这件事的问题是IE和较旧的Firefox支持

2. 只需在Illustrator中创建此“难题”部分即可。 可能很难在CSS中摆弄这个东西。 每一块都必须使用不同的颜色，所以我必须创建很多图像。

---

PS。 在执行类似的事情时，我将不胜感激其他提示/提示

Answer 1

一个好的方法是为此使用SVG 。 您只能在Illustrator中创建一个，然后通过CSS更改其大小，颜色和其他。

我建议使用内联SVG （而不是像导入常规图像一样导入），因为它为您提供了对各个组件的大量控制-以便可以轻松制作动画。

浏览器支持非常好 。

这是入门SVG的好指南： https : //css-tricks.com/using-svg/

Answer 2

我建议使用CSS转换 。 您可以将before伪元素和after伪元素与偏斜变换配合使用以实现此形状，而无需剪切路径，图像或矢量图形。

工作示例：

 ul, li { margin: 0; padding: 0; list-style: none; } ul { margin: 50px; } li a { display: block; width: 75px; height: 125px; line-height: 100px; text-align: center; position: relative; margin-bottom: 10px; color: white; text-decoration: none; } li a:before, li a:after { content: ''; display: block; width: 50%; height: 100%; background: grey; position: absolute; top: 0; z-index: -1; border: 1px solid black; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } li a:before { left: 0; border-right: 0; -webkit-transform: skewY(-45deg); -moz-transform: skewY(-45deg); -ms-transform: skewY(-45deg); -o-transform: skewY(-45deg); transform: skewY(-45deg); } li a:after { right: 0; border-left: 0; -webkit-transform: skewY(45deg); -moz-transform: skewY(45deg); -ms-transform: skewY(45deg); -o-transform: skewY(45deg); transform: skewY(45deg); } 

 <ul> <li> <a href="#">text1</a> </li> <li> <a href="#">text2</a> </li> <li> <a href="#">text3</a> </li> </ul>