Home Ask Login Register

Developers Planet

Your answer is one click away!

Omer February 2016

Want to create a div with just one corner raised a little bit up with css / html

I want to create a div with its right corner raised a little bit up. I have tried using it with borders but in vein. Please take a look at the picture and any suggestions will be appreciated :)

enter image description here

I have used css3 skew but it didn't work for me as I wanted


Omer February 2016

Ok, have found a way to achieve this with border and not with skew.

Here is my code...

.box {
  width: 300px;
  height: 200px;
  background: red;
  margin: 50px 0 0;
.box:before {
  content: "";
  width: 100%;
  height: 0;
  border-top: 30px transparent solid;
  border-right: 300px green solid;
<div class="box"></div>

But now another issue. The code above is useful for anyone who wants to make divs with fixed widths. What if I want to use this div as 100% of width but I cannot add % in the border in my css.

Any suggestions will be appreciated :)

Lekz Flores February 2016

Maybe you want something like this?

I used Three divs. A parent div, and two divs inside the parent div:


<div class="container">
    <div class="top"></div>
    <div class="main"></div>


body {
    width: 300px;
    with: 100%;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 300px solid transparent;
.main {
    background-color: red;
    width: 100%;
    height: 200px;


Post Status

Asked in February 2016
Viewed 3,256 times
Voted 12
Answered 2 times


Leave an answer

Quote of the day: live life