Html 使用 css 使 div 的顶部倾斜而不倾斜文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13591584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slant the top of a div using css without skewing text
提问by codeadventurer
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.
我正在尝试使用 CSS 创建一个仅在顶部倾斜且不倾斜其中的文本的 div。我希望它仅使用 CSS 的原因是因为它是一种响应式设计并且需要响应百分比，因为该 div 的其余部分会随着设备宽度的变化而弯曲。
A photo of what I am trying to accomplish is here:
我想要完成的事情的照片在这里：
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.
到目前为止，我得到的是创建一个倾斜的 div 并将其放置在另一个 div 中，然后使用负边距将其向上拉。我这样做有两个问题。第一个问题是，在最小的屏幕缩小（使您的浏览器宽度非常小）时，倾斜的 div 变得比包含的 div 小，使其看起来很奇怪。此外，这个 div 覆盖了我在它之后添加的任何文本。
The markup:
标记：
<aside>
<div id="skew"></div><!-- #skew -->
<h3 id="refer">Refer Your Friends</h3>
</aside>
The CSS:
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 */
}
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.
我曾尝试在父元素上使用偏斜，但这会偏斜其中的所有子元素。如果这是一个固定布局，我会使用绝对定位来帮助我，但由于它是响应式和弹性的，我不知道采取什么其他方法。
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.
我也希望它在 CSS 中，因为我有其他效果要添加到 div，例如使用 box-shadow 的外发光和背景渐变。
I also cannot change the design.
我也不能改变设计。
Any input on how to accomplish this would be great!
关于如何实现这一点的任何意见都会很棒！
回答by Sampson
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:
其结果类似于以下内容：
