html5+css斜体怎么打,html5 – 使用css倾斜div的顶部,而不会偏斜文本

我正在尝试创建一个只倾斜在顶端的div,并且不会使用CSS来扭曲其中的文本.

我希望它只是CSS的原因是因为它是一个响应式设计,需要响应百分比,因为其余的div随设备宽度的变化而变化.

我想要完成的照片在这里：

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

标记：

Refer Your Friends

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的外部辉光和背景渐变.

我也不能改变设计.

任何关于如何实现这一点的输入将是非常好的！