Search code examples
htmlcsscss-shapes

The easiest way to approach puzzle menu in web design

I have 2 basic ideas how to execute my designing, my question is which is better will give me more freedom with animations fiddling in CSS and so on later on.

enter image description here

That would be a navigation menu and hovering over one of them would make it bigger.

2 ideas:

  1. CSS clip-path: polygon tool. The problem with this thing is support on IE and older Firefox

  2. Just create this 'puzzle' piece in Illustrator. It probably would be harder to fiddle in CSS with this thing. Each piece would have to be in different colour so I would have to create a lot of images.

PS. I'll appreciate any other tips/hints when it comes to executing something like that

Solution

  • I would recommend using CSS transforms. You could use the before and after pseudo-elements with the skew transform to achieve this shape, without the need for clipping paths, images, or vector graphics.

    Working Example:

    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>