Make Ribbon Background Transparent

Question

I found this great ribbon CSS and I've been messing with it to work with my design. I'm almost there. The only issue I'm having is that the way it's set up, it's using the "body background color", which was originally blue, to make the ribbon triangles and the undershadow... The only problem is my layout is going to have a wooden background so using a color to make the ribbons won't work.

I was hoping that someone could help me or give me some advice on how to make the ends of the ribbons transparent rather than blue.

I've made a jsfiddle for this issue

CSS

/*Basic reset*/
* {margin: 0; padding: 0;}

html, body {height: 100%;}

body {
    background-image: url('http://noellesnotes.com/tester/wp-content/themes/ribbons-and-clouds/img/wood_pattern.png');
    text-align: center;
}

.container{
  width:564px;
  height: 500px;
  background: #FFFFFF;
  background-image: url('http://noellesnotes.com/tester/wp-content/themes/ribbons-and-clouds/img/paper_fibers.png');
  margin: 20px auto 20px;
  box-shadow: 3px 3px 3px #555555;
}

h1 {
    display: inline-block;
  width: 600px;
    font-size: 14px;
    line-height: 28px;
    color: #8699A0;
    text-shadow: 0 0 1px #758890;
    margin: 10px 0;
    font-family: arial, verdana;
    outline: none;
    padding: 14px 30px;
    position: relative;
    text-transform: uppercase;
    /*A little shadow for 3d effect*/
    /*Finally another shadow to negate some aspects of the :after element to complete the effect. This drops a shrinked shadow over the :after element with the same color like that of the background. The shadow is shrinked by the same offset amount = 18. And it is moved down by twice the offset amount to cover the entire height of the :after element*/
    box-shadow: 
        0 0 30px 0 rgba(0, 0, 0, 0.1), 
        0 36px 0 -18px #B1E3E2;
}

/*The ribbon ends*/
h1:before {
    content: '';
    position: absolute;
    top: 18px;
    left: -15%;
    z-index: -1;
    width: 130%;
    /*We will be using the triangle logic - 2 sided borders and 0 height. That will create negative triangles on the left and right*/
    height: 0;
    border: 28px solid rgba(0, 0, 0, 0);
    border-left: 28px solid #B1E3E2;
    border-right: 28px solid #B1E3E2;
    /*Same color as the container which is the body in this case*/
}

/*The after pseudo element will negatve the bottom part of the ribbon completing the effect*/
h1:after {
    content: '';
    width: 100%;
    height: 0;
    position: absolute;
    top: 100%; left: 0;
    z-index: -1;
    /*The height of the top border is same as width of the left/right borders for the smoothest effect. The height of the top border is also the same as the offset the :before element has from the top*/
    border-top: 18px solid #99acb2;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
}

h1, h1:before {
    /*Some cool multi-background - we will use a combination of 4 backgrounds to create a cool effect*/
    background-image: 
        /*2 grey borders*/
        linear-gradient(
            transparent 8%, 
            rgba(0, 0, 0, 0.1) 8%, 
            rgba(0, 0, 0, 0.1) 14%, 
            transparent 14%, 
            transparent 86%, 
            rgba(0, 0, 0, 0.1) 86%, 
            rgba(0, 0, 0, 0.1) 92%, 
            transparent 92%
        ), 
        /*white gloss gradient*/
        linear-gradient(
            rgba(255, 255, 255, 0.75), 
            rgba(255, 255, 255, 0) 
        ), 
        /*thin stripes*/
        linear-gradient(
            45deg, 
            transparent 40%, 
            rgba(0, 0, 0, 0.1) 40%, 
            rgba(0, 0, 0, 0.1) 60%, 
            transparent 60%
        ), 
        /*white base*/
        linear-gradient(#7ED3F6, #7ED3F6); 
    background-size: 
        cover, /*borders*/
        cover, /*white gloss*/
        4px 4px, /*thin stripes*/
        cover; /*base white*/
}

h1, h1:before, h1:after {
    box-sizing: border-box;
    /*Fix to make the borders appear on the ribbon ends also*/
    background-origin: border-box;
}

Thanks so much in advance!

Answer 1

Unfortunately, you'll need to try making this ribbon in a different way. The issue that you'll keep running into is that the background (your gradients) will always be below the border cutouts you've created, so making those transparent only reveals the gradients. Outside of using a css mask (only experimentally supported by webkit browsers) you'll have to pre-compose a lot of these elements, or look into a Canvas element, or perhaps SVG. You can look into -webkit-mask-image: url('...your image...'), but like I said it has very little browser support.