Comment créer un div avec une diagonale (ou angle) en haut de la ligne

Je suis un newbie sur CSS3 et tout ce que je sais est auto-appris, en lisant les gars, vous ou tout autre tutoriels donc après des heures de recherche et d'essai-erreur, j'ai vraiment besoin de votre aide :(.

Je suis en train de tourner SIMPLEMENT la ligne supérieure de la div. C'est ce que j'ai fait jusqu'à présent:

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

Sur le pied de page, j'ai tourner deux divs pour créer cet effet. Mais ce que je veux faire est d'avoir un droit bas de ligne sur le vert de la div. Ceci est un exemple de la façon dont je voudrais qu'il soit:

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

Je ne sais pas si je vais m'expliquer à droite. C'est le code CSS que j'ai utilisé pour faire tourner les 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);
}

Et c'est le 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 l'un de vous pouvait m'aider je serai très reconnaissant!!

Merci à l'avance.

b.

Vous ne pouvez pas faire pivoter la frontière d'un élément indépendamment de l'élément lui-même.
Ce DONC, la question pourrait aider (en particulier les commentaires sur la dernière réponse - jsfiddle.net/py9Ze/2): stackoverflow.com/questions/17595097/css-border-rotation

OriginalL'auteur bibifont | 2013-12-03

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *