Div with a slanted bottom

Question

I am trying to create a container for my website and have it be slightly slanted on the bottom like so:

Does anyone know how to do this? I tried transform: skewy(-10deg); but it does the top too which I'm trying not to do.

HTML

<div class="slanted">HI</div>

CSS

.slanted {
    background-color:red;
    height:500px;
}

Can you provide more context? If there is no content and you just need the color, you could rotate the colored item and apply `overflow:hidden` to the parent element. — Paul, Jun 27 '16 at 06:46
Possible duplicate of [Two-tone background split by diagonal line using css](http://stackoverflow.com/questions/14739162/two-tone-background-split-by-diagonal-line-using-css) — BSMP, Jun 27 '16 at 06:59

score 12 · Answer 1 · answered Jun 27 '16 at 06:47

HTML

<div class="slanted">HI</div>

CSS

.slanted {
    background-color:red;
    height:500px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 56%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}

CodePen

http://codepen.io/anthonyastige/pen/PzWvqo

Reference

Angled Edges with CSS Masks and Transforms

score 0 · Answer 2 · answered Jun 27 '16 at 06:56

0

Refer below snippet, this might e\be useful to you:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .updatedDiv {
                border-top-color: transparent; 
                border-right-color: rgb(7, 133, 214); 
                border-top-width: 59px; 
                border-right-width: 110px; 
                border-top-style: solid; 
                border-right-style: solid;
            }
        </style>
    </head>
    <body>
        <div  class="updatedDiv"></div>
    </body>
</html>

answered Jun 27 '16 at 06:56

Vipul

356
6
18

Looks like this doesn't work with content in it - http://codepen.io/anthonyastige/pen/YWNbqb – Anthony Astige Jun 27 '16 at 07:01
we can have two div's. one to show slanted div and another for contents – Vipul Jun 27 '16 at 07:05

score 0 · Accepted Answer · edited Mar 07 '18 at 21:34

I answered my own question. Just wanted the top and the bottom part to not be slanted so I added some negative margin.

* {
  margin: 0;
  height: 0;
}

.first {
  margin-top: -45px;
}

.slanted {
  height: 500px;
  -webkit-transform: skewy(-3deg);
  transform: skewy(-3deg);
}

footer {
  position: relative;
  margin-top: -45px;
  height: 150px;
  background-color: #bdc3c7;
}

<section class="slant-container">
  <div class="slanted first" style="background-color:#2ecc71;"></div>
  <div class="slanted" style="background-color:#3498db;"></div>
  <div class="slanted" style="background-color:#f39c12;"></div>
</section>

<footer></footer>

Div with a slanted bottom

3 Answers3