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

Tags: css,html,angle,diagonal

Problem :

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:

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:

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 class="one-fourth">
                <div class="widget twitter-widget">
                    <h3> Facebook Feed</h3>
                    <div class="tweet"></div>

            <div class="one-fourth">
                <div class="widget twitter-widget">
                    <h3>Fotos en Instagram</h3>
                    <div class="tweet"></div>

            <div class="one-fourth column-last">
                <div class="widget contact-info">
                    <div>address here

If any of you could help me I will be very grateful!!

Thanks in advance.


Solution :

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 there's a demo here.

    CSS Howto..

    How to make half-square background in css

    Chrome doesn't show the favicon

    How do I hide images that have a certain class when creating a pdf from html?

    Remove oval border-radius when 2 digit numbers show up

    How to Dynamically create a CSS class using AngularJS

    How to create an image sprite that stretches both horizontal and vertically as a single image?

    How to show ellipsis for long cell values in kendo ui grid?

    How to access this children div

    How to make the height of a div within a master page expand in a content page?

    How to implement :parent selector in css

    How to reset CSS in inline? [closed]

    bootstrap navbar how to give it a max width

    How to create CSS dropdown

    How to write specific CSS for mozilla, chrome and IE

    How to apply CSS page-break to print a table with lots of rows?

    How to select multiple objects of a class for css manipulation

    How to apply alternate background color for each column in CSS columns

    How to make a CSS file valid?

    How to use css value for javascript in IF-THEN construction? [closed]

    Grails: How do I use the resources plugin to add a CSS “link” tag into the head?

    How to add image after button/div css?

    CSS / jQuery: How to prevent tooltip from disappearing behind border of main wrapper (working code)

    How do I require an HTML document (webpage) to be a certain size, or use scroll bars

    How to squircle an app icon image with just CSS

    How to set different body background color for different pages in one css files?

    How can
    's with 100% width, yet discrepancies in mobile browsers, be combatted?

    How to id dom table so I can position it on page?

    Can't show updated image

    How can I do width = 100% - 100px in CSS?

    How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)