Html 如何创建带有对角线（或倾斜）顶线的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20362666/
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
How to create a div with a diagonal (or angled) top line
提问by bibifont
I'm a newbie on CSS3 and all I know is self-learned, reading you guys or any other tutorials so after hours of researching and trial-error, I could really use your help :(.
我是 CSS3 的新手，我所知道的只是自学，阅读你们或任何其他教程，因此经过数小时的研究和试错后，我真的可以使用您的帮助:(。
I'm trying to rotate JUST the top line of a div. This is what I did so far:
我正在尝试仅旋转 div 的顶行。这是我到目前为止所做的：
http://blanc-design.com/sigma2/
http://blanc-design.com/sigma2/
On the footer, I have rotate two divs to create that effect. But what I want to do is to have a straight bottom line on the green div. This is an example of how I would like it to be:
在页脚上，我旋转了两个 div 来创建这种效果。但我想要做的是在绿色 div 上有一条直线底线。这是我希望它成为的一个例子：
http://blanc-design.com/sigma2/ex.jpg
http://blanc-design.com/sigma2/ex.jpg
I don't know if I'm explaining myself right. This is the CSS code I've used to rotate the divs:
不知道我自己解释对不对。这是我用来旋转 div 的 CSS 代码：
#footer-top {
color: #fff;
padding: 35px 0 15px;
transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-webkit-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-moz-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-o-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-ms-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);
}
#footer-space {
padding: 0 0 6px;
}
#footer-top2 {
color: #fff;
background-color: rgba(20, 122, 188, 0.5);
background: rgba(20, 122, 188, 0.5);
color: rgba(20, 122, 188, 0.5);
padding: 6px 0 12px;
height: 2px;
transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-webkit-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-moz-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-o-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-ms-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);
}
#footer-top3 {
color: #fff;
background-color: rgba(128, 185, 46, 0.7);
background: rgba(128, 185, 46, 0.7);
color: rgba(128, 185, 46, 0.7);
transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-webkit-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-moz-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-o-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-ms-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
}
And this is the HTML:
这是 HTML：
<div id="footer-top2"></div>
<div id="footer-space"></div>
<div id="footer-top3">
<div id="footer-top">
<div class="container clearfix">
<div class="one-fourth">
<div class="widget twitter-widget">
<h3>últimos Tweets</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth">
<div class="widget twitter-widget">
<h3> Facebook Feed</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth">
<div class="widget twitter-widget">
<h3>Fotos en Instagram</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth column-last">
<div class="widget contact-info">
<h3>Contacto</h3>
<div>address here
</div>
</div>
</div>
</div>
</div>
</div>
If any of you could help me I will be very grateful!!
如果你们中有人能帮助我，我将不胜感激！！
Thanks in advance.
提前致谢。
b.
湾
回答by davidpauljunior
First I thought this could be done with CSS triangles, but I can't quite work out how to make a downward right pointing triangle be 100% width, so I moved on to another option...
首先我认为这可以用 CSS 三角形来完成，但我无法弄清楚如何使右下三角形的宽度为 100%，所以我转向了另一个选项......
You could keep using the rotation technique as you are doing, but then add some padding to the bottom of the green part, and then use a negative margin-bottom to bring the footer back up and over the diagonal. If you then set the footer to relative, it should sit over the top of the green so you won't see the diagonal line.
您可以继续使用旋转技术，然后在绿色部分的底部添加一些填充，然后使用负边距底部将页脚重新向上并越过对角线。如果您随后将页脚设置为相对，它应该位于果岭的顶部，这样您就不会看到对角线。
I tested this on the actual site and found that I need to add the padding to the containerinside footer-topand put the negative margin on footer-top. Otherwise, the padding would cause a gap at the bottom of the body.
我在实际站点上对此进行了测试，发现我需要将填充添加到container内部footer-top并将负边距放在footer-top. 否则，填充会导致主体底部出现间隙。
Hard to describe in words, so here's the snippet.
很难用语言描述，所以这里是片段。
#footer-top {
color: #fff;
padding: 35px 0 15px;
transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-webkit-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-moz-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-o-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-ms-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);
margin-bottom: -20px; /* Added */
}
/* Added */
#footer-top .container {
padding-bottom: 20px;
}
#footer-space {
padding: 0 0 6px;
}
#footer-top2 {
color: #fff;
background-color: rgba(20, 122, 188, 0.5);
background: rgba(20, 122, 188, 0.5);
color: rgba(20, 122, 188, 0.5);
padding: 6px 0 12px;
height: 2px;
transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-webkit-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-moz-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-o-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-ms-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);
}
#footer-top3 {
color: #fff;
background-color: rgba(128, 185, 46, 0.7);
background: rgba(128, 185, 46, 0.7);
color: rgba(128, 185, 46, 0.7);
transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-webkit-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-moz-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-o-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-ms-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
}
#footer-bottom {
color: #808080;
background-color: #2D2D2D;
font-size: 0.916em;
padding: 30px 0;
border-top: 1px solid #000;
box-shadow: 0 4px 4px rgba(0,0,0,0.2) inset;
position: relative; /* Added */
}<div id="footer-top2"></div>
<div id="footer-space"></div>
<div id="footer-top3">
<div id="footer-top">
<div class="container clearfix">
<div class="one-fourth">
<div class="widget twitter-widget">
<h3>??ltimos Tweets</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth">
<div class="widget twitter-widget">
<h3> Facebook Feed</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth">
<div class="widget twitter-widget">
<h3>Fotos en Instagram</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth column-last">
<div class="widget contact-info">
<h3>Contacto</h3>
<div>address here
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer-bottom">
<div class="container clearfix">
Footer content
</div>
</div>回答by Mike Legacy
You could try achieving this with a css gradient. I do something similar on my website's splashpage :
您可以尝试使用 css 渐变来实现这一点。我在我网站的启动页面上做了类似的事情：
The angled background on the above site is purely CSS3 gradients (with fallbacks of course)
上面网站上的倾斜背景纯粹是 CSS3 渐变（当然有后备）
This is done by creating a gradient, starting at 0% with a color of GREY, ending at 50% with a color of GREY as well, then starting another gradient at 50% with a color of DARKGREY and ending at 100% with a color of DARKGREY also.
这是通过创建一个渐变来完成的，从 0% 开始，颜色为 GREY，在 50% 处结束，颜色为灰色，然后在 50% 处开始另一个渐变，颜色为 DARKGREY，并以 100% 颜色结束DARKGREY 的也。
Basically you are tricking the system. It's technically a gradient, but looks like two solid colors that meet in the middle and are angled.
基本上你是在欺骗系统。从技术上讲，它是渐变色，但看起来像是在中间相遇并成角度的两种纯色。
Take a look at this site to learn more about the properties of a css gradient:
查看此站点以了解有关 css 渐变属性的更多信息：
