我有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

最簡單的方法來解決網頁設計中的拼圖菜單

回答

工作實施例：

相關問題