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

Question

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

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

2个想法：

1. CSS clip-path：多边形工具。这件事的问题是对IE和旧版Firefox的支持

2. 只需创建这个＆＃39;难题＆＃39;片在Illustrator中。用这个东西搞砸CSS可能会更难。每件作品都必须有不同的颜色，所以我必须创作很多图片。

PS。在执行类似的事情时，我会感谢任何其他提示/提示

Answer 1

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

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

浏览器支持为pretty good。

这是开始使用SVG的好指南： https://css-tricks.com/using-svg/

Answer 2

我建议使用CSS transforms。您可以使用带有偏斜变换的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>