Я новичок в CSS3, и все, что я знаю, это самообучение, я читаю вас, ребята, или любые другие учебные пособия, так что после нескольких часов исследований и пробных ошибок, я действительно смогу воспользоваться вашей помощью :(.

Я пытаюсь повернуть ТОЛЬКО верхнюю строку div. Это то, что я сделал до сих пор:

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

В нижнем колонтитуле я повернул два элемента div для создания этого эффекта. Но то, что я хочу сделать, это иметь прямую нижнюю линию на зеленом div. Это пример того, как я хотел бы, чтобы это было:

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

Я не знаю, правильно ли я объясняю себя. Это код CSS, который я использовал для поворота div:

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

Если кто-нибудь из вас может помочь мне, я буду очень признателен !!

Заранее спасибо.

б.