使用css倾斜div的顶部而不倾斜文本

Question

我正在尝试使用CSS创建一个仅在顶部倾斜并且不会使其中的文本倾斜的div.我之所以希望它只是CSS,是因为它是一个响应式设计,需要响应百分比,因为这个div的其余部分会随着设备宽度的变化而变形.

我想要完成的照片是:

到目前为止我得到的是创建一个倾斜的div并将其置于另一个div中,然后使用负边距将其向上拉.我这样做有两个问题.第一个问题是,在最小的屏幕缩小(使您的浏览器宽度非常小),倾斜的div变得小于包含div,使它看起来很奇怪.此外,这个div覆盖了我之后添加的任何文本.

标记:

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

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 */
}

我试过在父母身上使用偏斜,但这会扭曲其中的所有子元素.如果这是一个固定的布局,我会使用绝对定位来帮助我,但由于它是响应和弯曲,我不知道采取什么其他方法.

我也希望它在CSS中,因为我有其他效果添加到div,例如使用box-shadow的外部发光和背景渐变.

我也无法改变设计.

关于如何实现这一目标的任何意见都会很棒!

Answer 1

单向歪斜盒子,另一个歪斜它的内容:

<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);
}

这导致类似于以下内容:

演示:http://jsfiddle.net/Q7dKT/191/