Stack Overflow 27791081

css gradient over multiple elements

HTML

<body>
    <h1><a href="http://stackoverflow.com/questions/27791081">Stack Overflow 27791081</a></h1>
    <div id="e1">
        <h2>Example 1 (solid background)</h2>
        <div class="back">
            <div class="container">
                <div class="grad">Lorem ipsum dolor sit amet.</div>
                <div class="invi"></div>
                <div class="grad">Lorem ipsum dolor sit amet.</div>
            </div>
        </div>
    </div>
    <div id="e2">
        <h2>Example 2 (CSS clipping)</h2>
        <div class="back">
            <div class="container">
                <div class="grad">Lorem ipsum dolor sit amet.</div>
                <div class="invi"></div>
                <div class="grad">Lorem ipsum dolor sit amet.</div>
            </div>
        </div>
    </div>
</body>

CSS

/***************/
/** Example 1 **/
/***************/

#e1 .container>div {
    width: 180px;
}

#e1 .grad {
    border: 1px solid black;
}

#e1 .container {
    width: 181px;
    background-image: linear-gradient(to bottom right, cornflowerblue, blue);
}

#e1 .invi {
    height: 10px;
    border: 1px solid transparent;
    background-color: #666666;
}

#e1 .back {
    padding: 20px;
    background-color: #666666;
}

/***************/
/** Example 2 **/
/***************/
#e2 .container {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(to bottom right, cornflowerblue, blue);
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 43.75%, 100% 43.75%, 100% 56.25%, 0 56.25%, 0 100%, 100% 100%, 100% 0%);
    clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 43.75%, 100% 43.75%, 100% 56.25%, 0 56.25%, 0 100%, 100% 100%, 100% 0%);
}

#e2 .back {
    padding: 20px;
    background-color: #eee;
    background-image: -webkit-linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray);
    background-image: -moz-linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray);
    background-image: -o-linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray);
    background-image: linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray),
        linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

#e2 .grad {
    border: 1px solid black;
    height: 41.75px;
}

#e2 .invi {
    height: 12.5px;
}