Add a skewed background to DIV using CSS3

Question

I have a custom page header set within a WordPress theme which simply displays a background image and some custom text that is added on top of the image.

Currently the header looks like this:

I would like to add a skewed background bar to the text that is imposed on top of the background image so that it looks like this:

The skewed div would give gradient backgrounds to both the header and subheader text. I am trying to created the graient divs using the CSS pseudo selector ::before tag.

My issues are that the text is actually contained within a Container div which sets the width of the containing div.

I am trying to get the Summer Sale div background to but up close to the left hand browser window edge. This would mean it would have to break out of the container. I would like to do the same for the subheader text.

Also I am finding that currently the width of the summer sale spans the whole width of the containing div as pictured. I am not after this. I would like it to only span the width of the summer sale text.

Here are my code snippets:

HTML Code

<div class="container">
    <div class="row">
        <div class="col span_6">
            <h1>Summer Sale</h1>
            <span class="subheader">Save big on selected products</span>
        </div>
    </div>
</div>

CSS Code

#page-header-bg h1::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 6px;
    background: rgba(0,0,0,0.4);
    border-color: rgba(0,0,0,0.5);
    border-right-width: 4px;
    border-right-style: solid;
    -webkit-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
}
#page-header-bg h1::before, #page-header-bg .subheader::before {
    -webkit-transform: skew(20deg);
    -ms-transform: skew(20deg);
    transform: skew(20deg)
}
#page-header-bg h1::before, #page-header-bg .subheader::before {
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(60%, rgba(0,0,0,0.35)));
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
    background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000', GradientType=1 );
}
#page-header-bg .subheader, #page-header-bg h1 {
    position: relative
}
#page-header-bg .subheader::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    background: rgba(0,0,0,0.7);
    z-index: -1;
    padding: 0px 5px 5px 10px;
    border-radius: 6px
}

I thought about setting the width of the #page-header-bg h1::before tag however I cannot do that as the text will change and I can;t know what the width will be.

Any help would be greatly appreciated.

Answer 1

I don't know if you made any changes to your site after charlietfl's suggestion but as per the current code in your site you don't need to set the h1 to display: inline-block and width: auto because the h1 and the .subheader are already floated to the left. (Based on your last comment it does seem like you did.)

The reason why the skewed gradient element doesn't expand till left edge of the window is because the .container element has got padding: 0 90px set (meaning, there is a padding of 90px on the left and right). We can easily remove or override this setting to fix the issue but that would result in a lot of alignment changes within your webpage. Hence the simplest option would be to add a negative left position (equal to the padding) to the h1 and .subheader elements like below:

#page-header-bg .subheader,
#page-header-bg h1 {
  left: -90px;
}

Alternately, you could also use transform: translate(...) to shift the h1 and .subheader to the left by the same no. of pixels as the padding on .container. Generally, I would prefer the positioning approach because transforms aren't supported by older browsers but since you are already using skew transforms, either of the approaches should be fine.

#page-header-bg .subheader,
#page-header-bg h1 {
  transform: translate(-90px);
}

I have not added any demo because there are quite a lot of settings that require to be copied from the actual webpage.

Answer 2

Change the h1 to display:inline-block and width:auto so it doesn't run full width and your :before should then adjust also based on text width