-2

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
  • 1,727
  • 5
  • 28
  • 47
  • Did you google anything? – Bhojendra Rauniyar Feb 08 '16 at 08:42
  • I have checked the Skewed Borders post but its affecting on every border... I just want to lift the upper right corner ... Which seems not to be the answer in Skewed Borders post – Omer Feb 08 '16 at 08:49
  • @Martijn Pieters please undelete my answer... It was mistakenly posted on two questions... I have deleted it on the wrong question and want it back to this post. – Omer Feb 08 '16 at 09:59
  • @Omer, see **Method 2 - Gradient Background** in Harry's Answer in the link [Shape with a slanted side (Responsive)](http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive) – Lekz Flores Feb 09 '16 at 08:15

2 Answers2

1

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 :)

Omer
  • 1,727
  • 5
  • 28
  • 47
1

Maybe you want something like this?

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

HTML:

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

CSS:

body {
    margin:50px;
    min-width:400px;
    background:white;
}
.container{
    width: 300px;
}
.top{
    with: 100%;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 300px solid transparent;
}
.main {
    background-color: red;
    width: 100%;
    height: 200px;
}

FIDDLE

Lekz Flores
  • 468
  • 10
  • 27
  • Yes this is what I have already done... But it is fixed in width. Can we make it flexible? – Omer Feb 08 '16 at 09:31