CSS三角形，但我不能完全弄清楚如何使一个向下的右指向三角形是100％的宽度，所以我移动到另一个选项...

可以继续使用旋转技术，因为你在做，但然后添加一些填充到绿色部分的底部，然后使用负边距底部使页脚回到上方和对角线。如果你设置页脚为相对，它应该坐在绿色的顶部，所以你不会看到对角线。

我在实际网站上测试了并发现我需要添加填充到容器里面 footer-top 并把负边距放在 footer-top 。

很难用文字来描述，所以 这里有一个演示。

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 :(.

I'm trying to rotate JUST the top line of a div. This is what I did so far:

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:

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:

 #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:

<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.

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...

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 container inside footer-top and put the negative margin on footer-top. Otherwise, the padding would cause a gap at the bottom of the body.

Hard to describe in words, so there's a demo here.