Create slanted / irregular shape div

Question

I want to know if it's possible to create this type of div shape with CSS3.

example

I'm aware you can do things such as this using border's, but is there anyway to get the borders like in the image (spanning he entire top and bottom of the div) - and for bonus points, for it to do it responsively (% widths?)

.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid white;
}

Any links, fiddles, advice would be appreciated.

[Clipping and Masking With CSS](http://www.hongkiat.com/blog/css-masking/) — Itay, Oct 07 '13 at 11:28
You could use the CSS triangle technique you mentioned and then clip it. — ediblecode, Oct 07 '13 at 11:33

ediblecode · Accepted Answer · 2013-10-08T10:04:39.023

3

As mentioned in my comment, I have created a skewed triangle (if you remove the padding CSS you will see), and then added padding so that you can't see the tip of the triangle

.cornered {
    width: 160px;
    height: 0px;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 280px solid blue;
    padding:60px;
}

Fiddle

edited Oct 08 '13 at 10:04

answered Oct 07 '13 at 11:40

ediblecode

11,701
19
68
116

Does this only work with fix widths? In my implementation of this I need it to stretch the entire page, with the end of the triangle you hid with `clip` overflowing the page (with overflow hidden). Any thoughts on this? – Jon Kyte Oct 07 '13 at 11:44
Unfortunately you can't use % based values in either clip, nor border. Thus, I don't think it's possible to create a CSS only solution for you. However, using jQuery you could manually set the px values on page load and resize? – ediblecode Oct 07 '13 at 11:50
With your updated fiddle, I played around and just decided to set the highest width my page will be (1200px) and then place it in a container with `overflow: hidden;` and this gives me the effect I needed. So thank you very much for you help! http://jsfiddle.net/2ExQK/3/ – Jon Kyte Oct 07 '13 at 11:52
Ah brilliant! No worries. – ediblecode Oct 07 '13 at 11:53

score 0 · Answer 2 · answered Oct 07 '13 at 11:42

You could do this

css

.irregular-shape {
            border-left: 1500px solid black;

            padding: 50px;
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
        }

markup

<div class="irregular-shape"></div>

Create slanted / irregular shape div

2 Answers2