我有2个基本的想法如何执行我的设计，我的问题是哪个更好会给我更多的自由，动画在CSS等等中摆弄。最简单的方法来解决网页设计中的拼图菜单

enter image description here

这将是一个导航菜单，鼠标悬停在他们中的一个将使其更大。

2想法：

CSS夹路径：多边形工具。这个东西的问题是支持IE和老火狐
只需在Illustrator中创建这个'拼图'一块。这件事可能会让CSS变得更难。每件作品都必须采用不同的颜色，因此我必须制作大量图片。

PS。我会欣赏任何其他提示/提示，当涉及到执行这样的事情

2015-05-16 Higeath

如果这些是直角，有可能伪造它与[CSS三角形]（https://css-tricks.com/snippets/ css/css-triangle /）用边框制作：[生成器]（http://apps.eky.hk/css-triangle-generator/）。 1表示箭头，2表示尾部，例如：after，：before和必要时为空的额外元素。实际上并不需要是直角，但是要获得精确的宽度和高度会更困难...兼容性IE8 + – FelipeAls

我会建议使用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>

来源

2015-05-16 18:09:02

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

我推荐使用嵌入式SVG（而不是像普通图像那样导入它），因为它可以让您对各个组件进行很多控制 - 因此可以轻松进行动画制作。

浏览器支持是pretty good。

这里有一个很好的指导开始使用SVG的： https://css-tricks.com/using-svg/

来源

2015-05-16 17:56:29 Drown

谢谢我将研究它:) – Higeath

最简单的方法来解决网页设计中的拼图菜单

回答

工作实施例：

相关问题