How to create a div with a diagonal (or angled) top line

Question

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

Answer 1

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 here's the snippet.

#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 */
}

    

    

        

                

                    
Últimos Tweets
                    

                
            
            

                

                    
 Facebook Feed
                    

                
            

            

                

                    
Fotos en Instagram
                    

                
            


            

                

                    
Contacto
                    
address here
                        
                
            
        
    


    

    Footer content