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

Answers


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:

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

Post Status

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

Search




Leave an answer