Unusual tapered div design [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How can I achieve a design like this with CSS3. I tried to give it a very high transparent border but that makes the taper outwards and not inwards.
It looks like something that can be achieved with CSS that is why I am reluctant to use images for this.

Answer 1

I would suggest using :before and :after to 'cover' parts of your gradient'ed div.
The problem is that borders dont support '%' as standard. So you'll have to use #media queries if your div needs to be responsive to change out the width of the borders, like below.
JSFiddle
HTML
<div id="angled"></div>
CSS
body{
margin:0;
padding:0;
}
#angled{
background: #6393c1;
background: -moz-linear-gradient(top, #6393c1 0%, #cfe7fa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6393c1), color-stop(100%,#cfe7fa));
background: -webkit-linear-gradient(top, #6393c1 0%,#cfe7fa 100%);
background: -o-linear-gradient(top, #6393c1 0%,#cfe7fa 100%);
background: -ms-linear-gradient(top, #6393c1 0%,#cfe7fa 100%);
background: linear-gradient(to bottom, #6393c1 0%,#cfe7fa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6393c1', endColorstr='#cfe7fa',GradientType=0 );
width:500px;
margin:0 auto;
height:200px;
position:relative;
}
#angled:before,
#angled:after{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
content:" ";
height:0;
left:0;
right:0;
position:absolute;
bottom:0;
}
#angled:after{
border:30px solid rgba(255, 255, 255, 0);
border-bottom-width:0;
border-left-width:200px;
border-left-color:white;
}
#angled:before{
border:60px solid rgba(255, 255, 255, 0);
border-bottom-width:0;
border-right-width:300px;
border-right-color:white;
}
#media (min-width:800px){
#angled{
width:800px;
}
#angled:after{
border-left-width:350px;
}
#angled:before{
border-right-width:450px;
}
}
#media (min-width:1200px){
#angled{
width:1200px;
}
#angled:after{
border-left-width:500px;
}
#angled:before{
border-right-width:700px;
}
}
gradient generated using Ultimate CSS Gradient Generator

Answer 2

The below should give you a starting point, the key is creating triangles using the borders of a divs :before and :after pseudo elements.
Demo Fiddle
HTML
<div></div>
CSS
html, body, div {
width:100%;
margin:0;
padding:0;
}
div {
height:100px;
width:600px;
background:#007bff;
}
div:before, div:after {
content:'';
position:absolute;
display:block;
}
div:before {
width: 0px;
height: 0px;
top:100px;
border-style: solid;
border-width: 0px 200px 50px 0;
border-color: transparent #007bff transparent transparent;
}
div:after {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0 50px 400px;
border-color: transparent transparent transparent #007bff;
top:100px;
left:200px;
}

Answer 3

looks good so no?
I leave an example
http://jsfiddle.net/jdQaA/1/
header{
display:inline-block;
background: white;
text-align: center;
width: 100%;
}
.main{
display:inline-block;
width: 1024px;
margin:0 auto;
min-height: 100px;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
position:relative;
}
.main:before{
content: '';
position: absolute;
top: 100%;
left: 100px;
height: 1px;
width: 100%;
border-left: 924px solid #7db9e8;
border-bottom: 50px solid transparent;
}
.main:after{
content: '';
position: absolute;
top: 100%;
left: 0px;
height: 1px;
width: auto;
border-left: 100px solid #7db9e8;
border-bottom: 50px solid transparent;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.container{
width: 1024px;
display:inline-block;
}
.submain{
float:right;
position: relative;
top: 60px;
width: 300px;
height: 300px;
background: #7db9e8; /* Old browsers */
background: -moz-linear-gradient(top, #7db9e8 0%, #1e5799 97%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(97%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7db9e8 0%,#1e5799 97%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7db9e8 0%,#1e5799 97%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7db9e8 0%,#1e5799 97%); /* IE10+ */
background: linear-gradient(to bottom, #7db9e8 0%,#1e5799 97%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
margin-top: -25px;
}
.submain:before{
content: '';
position: absolute;
bottom: 100%;
left: 0px;
height: 1px;
width: auto;
border-right: 300px solid #7CB7E7;
border-top: 25px solid transparent;
}