我是CSS3的新手，我所知道的只是自学，阅读你们或任何其他教程，所以经过数小时的研究和反复试验，我真的可以使用你的帮助:(。
我正在尝试旋转一个div的顶行。这就是我到目前为止所做的：
http://blanc-design.com/sigma2/
在页脚上，我旋转了两个div以创建该效果。但我想做的是在绿色div上有一个直线底线。这是我希望它的一个例子：
http://blanc-design.com/sigma2/ex.jpg
我不知道我是否正确解释自己。这是我用来旋转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);
}
这是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>
如果你们中的任何人能帮助我，我将非常感激!!
提前致谢。
湾
答案 0 :(得分：11)
首先我认为这可以通过CSS三角形来完成，但是我无法弄清楚如何使向下的右三角形为100％宽度，所以我转向另一个选项......
你可以继续使用旋转技术，但是然后在绿色部分的底部添加一些填充，然后使用负边距底部使页脚向上并在对角线上方。如果你然后将页脚设置为相对，它应该位于绿色的顶部，这样你就不会看到对角线。
我在实际网站上对此进行了测试，发现我需要将填充添加到container内的footer-top，并将负余量添加到footer-top。否则，衬垫会在身体底部产生间隙。
难以用文字描述，所以这是片段。
#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>
答案 1 :(得分：-1)
您可以尝试使用css渐变来实现此目的。我在网站的启动页面上做了类似的事情：
以上网站的角度背景纯粹是CSS3渐变（当然还有后退）
这是通过创建一个渐变来完成的，从0％开始，颜色为GRAY，结束时为50％，颜色为GRAY，然后以50％开始另一个渐变，颜色为DARKGREY，结束于100％还有DARKGREY的颜色。
基本上你是在欺骗系统。它在技术上是一个渐变，但看起来像两个纯色，在中间相遇并且有角度。
查看此站点以了解有关css渐变属性的更多信息：