Create a div with angled side

Question

Let's say I have a container div with two divs inside. This is the effect I want to get:

<div>
  <div></div>
  <div></div>
</div>

In addition, I need it to be responsive, width and height in % or viewport units. And I need to fill them with various content, some content might even be partially hidden under one of these divs.

How would you dodge situation where skew affects child elements? Is there any more practical way than rotating child elements in negative direction? — FoxyStyle, Sep 16 '15 at 05:27
You may use [SVG](http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html) for creating shapes.! — CodeRomeos, Sep 16 '15 at 06:05

score 0 · Answer 1 · answered Sep 16 '15 at 06:27

Unfortunately CSS is not THAT advanced re: skew affecting child elements... I am sure what you are looking for is that the content will wrap at the angle that you have created there... I agree that the only way is as @user5151179 pointed out, with the 2D transforms... Just check for browser compatibility with this (There's no easy solution for solving this for all and every browser as you would know).

I think the easiest way would be for you to add a background image to the outer div, and have two rectangular divs where you can add content etc. inside the outer div, thus your text not wrapping at an angle, if that makes sense.

Arul James · Answer 2 · 2015-09-16T08:46:10.337

Try the following

<div class='container'>
<div class='div div1'>
</div>
<div class='div div2'>
</div>

<style>
.container{
    height:50px;
    width:100px;
    position:relative;
    overflow: hidden;
}
.div1 {
    background: none repeat scroll 0 0 #0000FF;
    left: -8px;
}
.div2 {
    background: none repeat scroll 0 0 #000000;
    right: -7px;
}
.div{
    width: 57px;
    top: -10px;
    transform: rotate(20deg);
    position: absolute;
    height: 72px;
}

There is no css method to do it. But we can do it by some css tricks like what i did above.

Create a div with angled side

2 Answers2