CODEWITHSUNDEEP
htmlcss
bryan
bryan

Reputation: 9399

Div with a slanted bottom

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

enter image description here

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;
}

Upvotes: 5

Views: 9117

Answers (3)

bryan
bryan

Reputation: 9399

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>

Upvotes: 0

Vipul
Vipul

Reputation: 356

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>

Upvotes: 0

Anthony Astige
Anthony Astige

Reputation: 1969

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

Upvotes: 14

Related Questions