Soy un novato en CSS3 y todo lo que sé es autoaprendizaje, al leerles a ustedes o cualquier otro tutorial, así que después de horas de investigación y error de prueba, realmente podría usar su ayuda :(.

Estoy tratando de rotar SOLO la línea superior de un div. Esto es lo que hice hasta ahora:

http://blanc-design.com/sigma2/

En el pie de página, he girado dos divs para crear ese efecto. Pero lo que quiero hacer es tener una línea de fondo recta en el div verde. Este es un ejemplo de cómo me gustaría que fuera:

http://blanc-design.com/sigma2/ex.jpg

No sé si me estoy explicando bien. Este es el código CSS que he usado para rotar los 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);
}

Y este es el 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>

Si alguno de ustedes podría ayudarme, estaré muy agradecido!

Gracias por adelantado.

segundo.