clip-path tutorial

Honeycomb navigation bar with CSS clip-path

This time I will show you how to use CSS3 clip-path property and .not() selector for animations

This time I will show you how to use CSS3 clip-path property and .not() selector for animations

Final result (hover over buttons):

  • 1) Link Font Awesome CDN in the document head.

  • 2) Create basic markup for our ‘honeycomb’ grid:

    <div class="social">
        <div>
            <a href="/">
                <div class="button">
                    <i class="fab fa-facebook-f"></i>
                </div>
            </a>
            <a href="/">
                <div class="button">
                    <i class="fab fa-instagram"></i>
                </div>
            </a>
        </div>
        <div>
            <a href="/">
                <div class="button">
                    <i class="fab fa-youtube"></i>
                </div>
            </a>
            <a href="/">
                <div class="button">
                    <i class="fab fa-linkedin-in"></i>
                </div>
            </a>
            <a href="/">
                <div class="button">
                    <i class="fab fa-google-plus-g"></i>
                </div>
            </a>
        </div>
        <div>
            <a href="/">
                <div class="button">
                    <i class="fab fa-twitter"></i>
                </div>
            </a>
            <a href="/">
                <div class="button">
                    <i class="fab fa-pinterest-p"></i>
                </div>
            </a>
        </div>
    </div>
  • 3) We will be using clip-path property which unfortunately is not supported by Microsoft IE or Edge browser at the time of writing. If you’re interested in current browser support visit caniuse.com/clip-path The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden. There is a great online tool at https://bennettfeely.com/clippy/ which allows you create and modify different shapes in CSS using clip-path.

  • #clip path property can be used to specify a part of an element to display

    Now that we know what clip-path is we can style our grid:

    .social {
        position: relative;
        margin: 50px auto;
        width: 200px;
        display: block;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        border-radius: 100%;
    }
    .social > div {
        position: relative;
        top: 0; left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .social > div:nth-of-type(1) {
        margin-bottom: -15px;
    }
    .social > div:nth-of-type(3) {
        margin-top: -15px;
    }
    .social > div:nth-of-type(3) {
        position: relative;
        top: 0; left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .button {
        position: relative;
        width: 60px;
        height: 60px;
        text-align: center;
    }
    .button::before {
        content: '';
        display: block;
        position: absolute;
        top: 50%; left: 50%; 
        width: 96%;
        height: 96%;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 
                           50% 100%, 0% 75%, 0% 25%);
        background-color: black;
        transition: .2s;
        transform: translate(-50%, -50%) scale(1);
    }
    i {
        font-size: 30px;
         position: absolute;
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        z-index: 10;
        transition: .2s;
    }

    Result should look like this:

  • 4) Add ::after element to create inset shadow effect on half of our polygon shape. I used free tools at https://bennettfeely.com/clippy/ to create custom clip-path shape.

  • .button::after {
        content: '';
        display: block;
        position: absolute;
        top: 50%; left: 50%; 
        width: 85%;
        height: 85%;
        clip-path: polygon(50% 0, 100% 25%, 
                           100% 75%, 50% 100%);
        background-color: rgba(255,255,255,.2);
        transition: .2s;
        transform: translate(-50%, -50%) scale(1);
    }
  • 5) Use :not() selector to apply styles to all elements that are currently not hovered.

    The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

  • .social:hover .button:not(:hover)::before,
    .social:hover .button:not(:hover)::after
    {
        transform: translate(-50%, -50%) scale(.85);
    }
    .button:hover::after,
    .button:hover::before {
        transform: translate(-50%, -50%) scale(1.15);
    }
  • Effects like this often have small animation glitch, when the last frames of animation jump few pixels or jiggle. According to my research the cause is still kind of a mystery, but somebody figured out by trial and error that applying backface-visibility: hidden to the parent element resolves the issue. Remember to try and apply it if some of your transition animations appear buggy.

  • That’s all for now. More guides coming later. Thank you for reading.

    Leave a Reply