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

Question

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

htmlcssresponsive-designtransformcss-shapes

14

我正在尝试使用CSS创建一个仅在顶部倾斜而不扭曲其中文本的div。

我希望它是仅通过CSS实现，因为这是响应式设计，需要根据百分比进行响应，因为div的其余部分会随着设备宽度的变化而弹性伸缩。

这里有一张我想要实现的照片：

Slanted design

到目前为止，我所做的是创建一个扭曲的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实现外发光和背景渐变。

同时，我也无法更改设计方案。

如果有任何关于如何实现这一点的建议，那将非常棒！

- codeadventurer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

将盒子倾斜一侧，其内容则会向另一侧倾斜：

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

这导致类似于以下内容：

输入图像描述

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