14

我正在尝试使用 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 的外发光和背景渐变。

我也不能改变设计。

任何关于如何实现这一点的意见都会很棒！

4

1 回答 1

26

以一种方式倾斜盒子，另一种方式倾斜其内容：

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

于 2012-11-27T19:44:33.537 回答