Now Days, with the Help of HTML5 & CSS3 it become easier to work Objects, Shapes and special Drawings like SVGs.
Recently I had face one very critical development issues and as we know that after working with HTML 5 & CSS 3 it is very hard to think according to our old fashion Coding and Scripting Skills that help us reach to our output on Websites.
I want to design something like this.
After a long research and questioning on many portal and website related to Web Development – HTML Development I could not find best possible solution so far, but I had tried it as our old development & coding skills an styles I found this exact solution.
.wrapper {
width:100%;
margin:0 auto;
background:#efefef;
display:block;
min-height:500px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
/* First Div which work as Parent DIV */
.firstdiv {
width:0;
height:270px;
border-top: 80px solid #fff;
border-left: 50vw solid #0eaaee;
border-right: 50vw solid #0eaaee;
border-bottom:0;
}
/* Second DIV which work as Overlapping DIV*/
.seconddiv {
width:0;
height:130px;
border-top: 80px solid #0eaaee;
border-left: 50vw solid #fff;
border-right: 50vw solid #fff;
border-bottom:0;
background:#fff
}
/* Content Section for Main Parent DIV Targetting with Content */
.content {
position:relative;
width:100%;
margin:-235px auto auto auto;
height:200px;
color:#fff;
font-family:Roboto Condensed;
text-align:center
}
.content h1 {
font-size:46px;
}
.content p {
font-size:18px;
line-height:28px;
}
The benefit of this code is that it so simply coded that it don’t required special depth of HTML5 and work with most of best viewports with Responsive Versions.
If you find anything with bug or error in code the please comments are open to all let’s start some detail conversion and find best Creative Solution.
Thanks for Reading.
Global eCore 