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

Question

我有 2 个如何执行我的设计的基本想法，我的问题是哪个更好，可以让我更自由地摆弄 CSS 中的动画等等。

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

2 个想法：

CSS clip-path：多边形工具。这个东西的问题是对 IE 和旧版 Firefox 的支持
只需在 Illustrator 中创建此 'puzzle' 作品。用这个东西 fiddle in CSS 可能会更难。每件作品都必须有不同的颜色，所以我必须创建很多图像。

PS。我会感谢任何其他 tips/hints 执行类似的事情

Answer 1

一个好的方法是为此使用 SVG 。您只能在 Illustrator 中创建一个，然后通过 CSS.

更改其大小、颜色和其他

我建议使用内联 SVG（而不是像普通图像一样导入它），因为它可以让您对各个组件进行大量控制 - 这样它们就可以轻松地制作动画。

浏览器支持 pretty good。

这里有一个很好的 SVG 入门指南： https://css-tricks.com/using-svg/

Answer 2

我建议使用 CSS transforms. You could use the before and 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>

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

The easiest way to approach puzzle menu in web design

html

css

css-shapes

工作示例：