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

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.

You cannot rotate the border of an element independently of the element itself. — Diodeus - James MacFarlane, Dec 03 '13 at 22:16
This SO question might help (particularly the comments on the last answer - http://jsfiddle.net/py9Ze/2/): http://stackoverflow.com/questions/17595097/css-border-rotation — lebolo, Dec 03 '13 at 22:16

davidpauljunior · Accepted Answer · 2017-05-09T09:49:59.647

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

<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>
<div id="footer-bottom">
    <div class="container clearfix">
    Footer content
    </div>
</div>

WOW!!! This is exactly what I was looking for. You are amazing!!!! THANK YOU!!! I'm trying to give you points but I can't because I'm new here, but I will as soon as I get points :). A hundred thanks! Cheers. — bibifont, Dec 04 '13 at 13:49
Nothing more disappointing that a dead link... (and looks most likely to jsbin being down) Granted this is about 3 years old... but still...people, please post code AND a link. Otherwise, these answers become useless. I wish SO would force such requirements. — ocergynohtna, May 08 '17 at 21:39
@ocergynohtna the link works for me. I've added the code as an inline snippet though. — davidpauljunior, May 09 '17 at 09:53

score -2 · Answer 2 · answered Dec 03 '13 at 22:16

-2

You could try achieving this with a css gradient. I do something similar on my website's splashpage :

http://agency89ninety.com

The angled background on the above site is purely CSS3 gradients (with fallbacks of course)

This is done by creating a gradient, starting at 0% with a color of GREY, ending at 50% with a color of GREY as well, then starting another gradient at 50% with a color of DARKGREY and ending at 100% with a color of DARKGREY also.

Basically you are tricking the system. It's technically a gradient, but looks like two solid colors that meet in the middle and are angled.

Take a look at this site to learn more about the properties of a css gradient:

http://www.css3files.com/gradient/

answered Dec 03 '13 at 22:16

Mike Legacy

1,056
1
10
24

Thanks for your answer!! I'm going to take a look and let you know :). – bibifont Dec 03 '13 at 22:19
3

The given link seems not to be relevant anymore. – meles Apr 25 '17 at 12:29
downvoted because link isn't relevant anymore. please create a snippet using stackoverflows inline editor – Sgnl Jun 14 '17 at 02:33

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

2 Answers2

Linked