Home/ Questions/Q 8807411
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T02:21:43+00:00

Is there a way to cut a div background to expose the layer below?,

  • 0

Is there a way to cut a div background to expose the layer below?, like going from this:

enter image description here

to this:

enter image description here

Any bleeding edge css rule is welcome!

UPDATE

Ok, I’ve made a sample code: http://jsfiddle.net/coma/9ae7g/1/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Menu</title>
        <style type="text/css">
            @charset 'UTF-8';

            body {
                padding: 0;
                margin: 0;
                font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, Arial, sans-serif;
                font-size: 12px;
                background: #fff url("http://colourlovers.com.s3.amazonaws.com/images/patterns/1762/1762793.png?1314797062");
            }

            a {
                text-decoration: none;
            }

            #menu {
                position: fixed;
                top: 0;
                left: 0;
                bottom: 0;
                width: 250px;
            }

            body.wide>#menu {
                width: 0;
            }

            #menu * {
                line-height: 1em;
            }

            #menu:after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 5px;
                height: 100%;
                border-right: 1px solid #666;
                pointer-events: none;
                background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
                background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%);
                background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%);
                background: -ms-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%);
                background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%);
            }

            #menu ul, #menu li {
                padding: 0;
                margin: 0;
                list-style: none;
                background-color: #fafafb;
            }

            #menu li {
                position: relative;
            }

            #menu>a {
                position: absolute;
                left: 100%;
                top: 50%;
                z-index: 1;
                display: block;
                width: 10px;
                height: 20px;
                margin: -10px 0 0 0;
                text-indent: -100em;
                overflow: hidden;
                border-radius: 0 2px 2px 0;
                background-color: #666;
                transition: background-color .3s ease-out;
                -moz-transition: background-color .3s ease-out;
                -webkit-transition: background-color .3s ease-out;
                -o-transition: background-color .3s ease-out;
                -ms-transition: background-color .3s ease-out;
            }

            #menu>a:before {
                position: absolute;
                top: 5px;
                right: 4px;
                display: block;
                content: '';
                border-width: 5px 6px 5px 0;
                border-style: solid;
                border-color: transparent #fff transparent transparent;
            }

            body.wide>#menu>a:before {
                right: 2px;
                border-width: 5px 0 5px 6px;
                border-color: transparent transparent transparent #fff;
            }

            #menu>ul {
                height: 100%;
                background-color: #888;
                overflow: hidden;
            }

            #menu>ul span, #menu>ul a {
                display: block;
                padding: .4em;
                color: #666;
                font-weight: bold;
                border-bottom: 1px solid #999;
            }

            #menu>ul a {
                border-top: 1px solid #fff;
                border-bottom: 1px solid #e9ecee;
            }

            #menu>ul>li>span {
                font-size: 1.25em;
                font-weight: bold;
                color: #666;
                text-shadow: 0 1px 1px #fff;
                background-color: #eee;
                background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
                background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
                background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
                background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
                background-image: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
                cursor: pointer;
                transition: background-color .4s;
                -moz-transition: background-color .4s;
                -webkit-transition: background-color .4s;
                -o-transition: background-color .4s;
                -ms-transition: background-color .4s;
            }

            #menu>ul>li>span:hover {
                background-color: #fff;
            }

            #menu>ul>li>ul {
                display: none;
            }

            #menu>ul>li.opened>ul, #menu>ul>li.current_ancestor>ul {
                display: block;
            }

            #menu>ul>li>ul>li>a {
                font-size: 1.2em;
                color: #4183c4;
                transition: background-color .4s;
                -moz-transition: background-color .4s;
                -webkit-transition: background-color .4s;
                -o-transition: background-color .4s;
                -ms-transition: background-color .4s;
            }

            #menu>ul>li>ul>li.current>a, #menu>ul>li>ul>li.current>a:hover {
                color: #fff;
                background-color: #39f;
                border-color: #39f;
            }

            #menu>ul>li>ul>li.current:after {
                content: '';
                position: absolute;
                right: -1px;
                top: 50%;
                margin: -9px 0 0 0;
                display: block;
                border-width: 10px 10px 10px 0;
                border-style: solid;
                border-color: transparent #fff transparent transparent;
                z-index: 1;
            }

            #menu>ul>li>ul>li>a:hover {
                background: #fff;
            }

            #menu>ul>li>ul>li:last-child {
                border-bottom: 1px solid #aaa;
            }

            #menu>ul>li>ul>li[data-count]:after {
                position: absolute;
                top: 50%;
                right: 14px;
                display: block;
                content: attr(data-count);
                padding: .26em .5em;
                background-color: #fff;
                border-radius: 8px;
                font-size: 12px;
                margin: -9px 0 0 0;
                color: #777;
                border-top: 1px solid #ccc;
            }

            #section {
                height: 2000px;
            }
        </style>
    </head>
    <body>      
        <div id="menu">
            <a title="cerrar o abrir el menú" href="#">toggle</a>
            <ul>
                <li class="first opened">
                    <span>Usuario</span>
                    <ul class="menu_level_1">
                        <li class="first">
                            <a href="/logout">Logout</a>
                        </li>
                        <li class="current">
                            <a href="/">Home</a>
                        </li>
                        <li>
                            <a href="/user/">Usuarios</a>
                        </li>
                        <li class="last">
                            <a href="/discount/">Descuentos</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>Artistas</span>
                    <ul class="menu_level_1">
                        <li class="first">
                            <a href="/artist/">Artistas</a>
                        </li>
                        <li class="last">
                            <a href="/artists/top10">Top 10 (3)</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>Obras</span>
                    <ul class="menu_level_1">
                        <li class="first">
                            <a href="/artwork/">Obras</a>
                        </li>
                        <li>
                            <a href="/artworks/destacadas">Destacadas (4)</a>
                        </li>
                        <li class="last">
                            <a href="/artworks/ofertas">Ofertas (3)</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>Pedidos</span>
                    <ul class="menu_level_1">
                        <li class="first last">
                            <a href="/order/">Pedidos</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>Blog</span>
                    <ul class="menu_level_1">
                        <li class="first">
                            <a href="/article/">Artículos</a>
                        </li>
                        <li class="last">
                            <a href="/category/">Categorías</a>
                        </li>
                    </ul>
                </li>
                <li class="last">
                    <span>Newsletter</span>
                    <ul class="menu_level_1">
                        <li class="first last">
                            <a href="/newsletter/">Emails</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="section"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {

                var style = {
                    opened: 'opened',
                    wide: 'wide',
                    currentAncestor: 'current_ancestor'
                };

                var menu = $('#menu');
                var items = $('#menu>ul>li');
                var body = $('body');

                items.filter('.' + style.currentAncestor)
                .removeClass(style.currentAncestor)
                .first()
                .addClass(style.opened);

                items.children('span').click(function(event) {

                    event.preventDefault();

                    var group = $(this).parent();

                    if(!group.hasClass(style.opened)) {

                        items.filter('.' + style.opened).removeClass(style.opened);
                        group.addClass(style.opened);

                    }


                });

                menu.children('a').click(function(event) {

                    event.preventDefault();

                    body.toggleClass(style.wide);

                });

            });
        </script>
    </body>
</html>

The birdy background and the #section with a height of 2000px is just for testing by moving the content.

Thanks to everyone!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    An element will be transparent if it and all of it’s children are transparent (no background-color, no background-image).

    To accomplish what you’re asking for, here’s what I’d do:

    1. Avoid background styling on the container of that group of elements.
    2. Do all background styling on those individual navigation elements via a single image, even if you have to clip it to get it to be flexible.
    3. For the active navigation element, swap the background image to one which has the transparent indent that you want.

    See this JSFiddle, forked from your code: http://jsfiddle.net/2XSd5/. This demonstrates the approach I described: make all backgrounds transparent, and use a background image for the cut out. Here’s the code that I modified:

    #menu:after { background: none; }

#menu > ul > li > ul > li.current:after { content: none; }

#menu ul, #menu li { background-color: transparent; }

#menu > ul { background-color: transparent; }

#menu > ul > li > ul > li > a, #menu > ul > li > ul > li > a {
    background-color: white;
    }

#menu > ul > li > ul > li.current > a, #menu > ul > li > ul > li.current > a:hover {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAV5JREFUeNrs21FKw0AUQNEZcQluR91EVXSFQnUN1f3oEjROSwQrcYyl4HvhHHjQhHzl4yZtZ+rQFIAETtwCQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECFh+sYRyAFMEqogVEd9qmjp+r2wEE9DIVLICIsbr6GiyAyLF6+jzhX0IgRawEC0gTK8ECIsbqeipWggVE8tqLlWABkWJ10+a5d5FgARFidTvGqrvzRrCA/3bXZtPm/bcLrcNavu3Tqv5wfMh2LAuNOba3MnOLoDes3CGaM6VzLExEcN/mfM4DVLDyxukvb0K17O8ZnTOlcx6O6azNeoyWYC1APWDKRGQEh8jRemxzIVjAIqIlWECaaAkWEDVal4IFZInWw/do1aFxb4CgtpuhV4IFZIrWjpXuQIavhzt+wwLSECxAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIECyCEDwEGAGnvSNs6OT13AAAAAElFTkSuQmCC) right center no-repeat;
    color: grey;
    }
    • 0