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

问题描述：

我想创建一个只倾斜在顶部的div，并且不会倾斜其中的文本，使用CSS。
我希望它是CSS的原因是因为它是一个响应式设计，需要响应百分比，因为这个div的其余部分随着设备宽度的变化而变化。

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:

到目前为止，我得到的是创建一个扭曲的div，并将其放置在其他div，然后使用一个负边距将其向上拉。有这样的两个问题，我做到了这一点。第一个问题是，在最小的屏幕缩小（使您的浏览器的宽度真的很小），偏斜的div变得比包含div小，使它看起来奇怪。

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.

标记：

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

，但是这会倾斜其中的所有子元素。如果这是一个固定的布局，我会使用绝对定位来帮助我，但由于它是响应和flexes，我不知道采取其他方法。

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.

我也希望它是在CSS，因为我有其他效果添加到div，如外部发光使用框阴影和背景渐变。

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.

我也不能改变设计。

任何关于如何完成这个任务的输入都是非常好的！

Any input on how to accomplish this would be great!

答

以一种方式倾斜框，其内容为：

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:

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

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

相关推荐