Question

I am trying to create a div that slants only at the top and does not skew the text within it, using CSS.
The reason I would like for it to be CSS-only is because it is a responsive design and needs to respond to percentages, as the rest of this div flexes as the device width changes.

A photo of what I am trying to accomplish is here:

What I have gotten so far is to create a skewed div and position it within the other div, then use a negative margin to pull it upwards. There are two issues with this way that I’ve done this. The first issue is that on the smallest screen shrinkage (make your browser width really small), the skewed div becomes smaller than the containing div, making it look odd. Also, this div is covering up any text I am adding after it.

The markup:

<aside>
                <div id="skew"></div><!-- #skew -->
                <h3 id="refer">Refer Your Friends</h3>
</aside>

The CSS:

   #skew {
background:#00328b;
width:103%;
height:66px;
border-radius:8px;
margin-top:-47px;
margin-left:-1.2%;
  -webkit-transform: skewY(-5.5deg); 
 -moz-transform: skewY(-5.5deg); 
  -ms-transform: skewY(-5.5deg); 
   -o-transform: skewY(-5.5deg); 
      transform: skewY(-5.5deg); 
}

.main aside {
color: white;
padding: 20px 10px;
margin-top:120px;
border-radius:8px;
background: rgb(0,51,141); /* Old browsers */
}

I have tried using the skew on the parent aside, but this skews all child elements within it. If this were a fixed layout, I would use absolute positioning to help me, but since it is responsive and flexes, I don’t know what other approach to take.

I also would like for it to be in CSS because I have other effects to add to the div, such as an outer glow using box-shadow, and a background gradient.

I also cannot change the design.

Any input on how to accomplish this would be great!

Answer 1

Skew the box one way, and its contents the other:

<aside class="skew-neg">
    <div class="skew-pos">
        <p>Hello World.</p>
        <p>@jonathansampson.</p>
        <p>This box is skewed.</p>
        <p>In supported browsers.</p>
    </div>
</aside>

/* Skew the container one way */
.skew-neg {
    -webkit-transform: skewY(-5deg);
    -moz-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    -o-transform: skewY(-5deg);
    transform: skewY(-5deg);
}

/* And the child another way */
.skew-pos {
    -webkit-transform: skewY(5deg);
    -moz-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    -o-transform: skewY(5deg);
    transform: skewY(5deg);
}

Which results in something similar to the following:

Demo: http://jsfiddle.net/Q7dKT/191/