how can i create a div shape like the one i have shared with 100% width

Question

I want create a div with a shape as shown above and I want it to be 100% width.

Below is the HTML and CSS that I tried. I was able to make a triangle but it doesn't work with 100% width of div:

HTML:

<div class="triangle-up"><div></div></div>

CSS:

.triangle-up {
    width: 25%;
    height: 0;
    padding-left:25%;
    padding-bottom: 25%;
    overflow: hidden;
}
.triangle-up div {
    width: 0;
    height: 0;
    margin-left:-500px;
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-bottom: 500px solid #4679BD;
}

Answer 1

JSBIN

HTML

  <div class="container"><div class="triangle-up"><div></div></div></div>

CSS

.container{ 
  width: 500px;
  background-color: #000; 
  overflow: hidden;
}
.triangle-up {
    height: 0;
    padding-bottom: 24%;
}
.triangle-up div {
    width: 0;
    height: 0;
    border-left: 900px solid #4679BD;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
}

Answer 2

how about 3d css transformation?

html:

<div class="triangle-up"><div></div></div>

css:

body{
   background:black;
}
.triangle-up div{
width:400px;
    height:150px;
    background:cyan;
    -webkit-transform:rotateY(40deg);
    margin:50px;
}
.triangle-up{
    -webkit-perspective: 500px;
}

here is an example FIDDLE

EDIT:

basically you give the container div triangle-up a depth of 500px; and you rotate the inner div by its y-axis.

a more thorough explanation can be found in THIS nice article.

Answer 3

You can use the pseudo elements with transform:rotate().

FIDDLE

This makes 2 seperate elements (the pseudo elements :before/:after) with the same background color as the div and rotates them to create your desired shape.

• You can display an image in the background.
• Responsive width and height.
• As the tranform property isn't on the div element, it will alow you to put content in your shape without transfoming it.
• Less HTML markup.

HTML :

 <div></div>

CSS :

div{
    height:40%;
    margin:10% 0 0;
    background:#1EC8D7;
    position:relative;
    z-index:2
}
div:after,div:before{
    content:"";
    position:absolute;
    background:#1EC8D7;
    width:110%;
    height:100%;
    z-index:-1;
    right:0;
}
div:before{
    top:0;

    transform-origin:100% 0;
    -ms-transform-origin:100% 0;
    -webkit-transform-origin:100% 0;

    transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
}
div:after{
    bottom:0;

     transform-origin:100% 100%;
    -ms-transform-origin:100% 100%;
    -webkit-transform-origin:100% 100%;

    transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
}