How to Make a Div with Irregular Shapes with CSS3 and HTML5

How to create a div with an irregular shape?

THE SVG WAY

Since the shape you request is not possible with only CSS, I suggest you use SVG to draw the shape.

The following piece of code will create the below shape:

<svg height="150" width="150">
    <polygon points="20,10 100,30 120,100 0,100" style="fill:red;" />
</svg>

How can I make a div with irregular shapes with css3 and html5?

Elements have always been rectangular. Still, you can simulate other shapes by drawing CSS shapes within the rectangular division and by arranging different divisions (with z-index, etc.). This will help you:

http://css-tricks.com/examples/ShapesOfCSS/

Can I make an irregular div shape using only CSS?

This will be impossible with a single div, because the div will always be rectangular. See the excellent answer here for a fuller explanation: How can I make a div with irregular shapes with css3 and html5?

Edit: This is actually possible with the clip-path CSS attribute, as helpfully pointed out by @ZachSaucier in the comments. Demo You learn something new every day!

Create slanted / irregular shape div

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

css div containers with irregular shapes

Since all the answers use 2 elements, let's post another with a single element. Uses padding to keep the text inside the trapezoid, and 2 gradients to create the background in trapezoid shape

div {  width: 300px;  padding: 0px 50px;  background-image: linear-gradient(80deg, transparent 40px, lightblue 40px), linear-gradient(-80deg, transparent 40px, lightblue 40px);  background-size: 51% 100%;  background-position: left bottom, right bottom;  background-repeat: no-repeat;}

<div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

How to create an irregular square shape in css?

You can use clip-path.

The clip-path CSS property creates a clipping region that defines
what part of an element should be displayed. More specifically, those
portions that are inside the region are shown, while those outside are
hidden.

Try this code snippet.

div{   width: 150px;   height: 150px;   -webkit-clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);   clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);   background: pink;}

<div></div>

How do I make irregular shape in CSS

Use clip-path this website is a great tool to help you get the hang of it, in your case you would need something like this

.shape {
width : 250px;
height : 400px;
background-color : #1a1a1a;
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
}

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

Looking for a way to simulate irregularly shaped DIVs

Hey! what about a solution like this? http://jsfiddle.net/steweb/H7s2P/

You'd 'just' need to split content paragraphs. Top one take care of header 'effect', the bottom one take care of footer 'effect' (through 'float' and margin adjustment tricks) :)

Markup:

<div id="wrapper">
    <div id="header">LOGO/HEADER AREA</div>
    <div id="content">
        <div id="piece-of-header"></div>
        <p id="top">
        HEAD ONE FOR PAGE <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget venenatis lorem. Fusce sit amet purus non nulla fringilla sollicitudin. Donec ultrices, nulla ac tincidunt faucibus, odio arcu pellentesque lectus, sit amet bibendum risus velit suscipit odio. Nulla facilisi. In scelerisque auctor orci, eu volutpat risus vulputate sit amet. Mauris dictum blandit fringilla. In et ante quis quam molestie consequat vehicula vitae ligula. Quisque ultricies volutpat lectus, eget accumsan diam malesuada eu. Fusce nec tellus magna. Phasellus at sem eget lectus varius vestibulum. Phasellus sodales aliquet lectus et feugiat. Curabitur mi nulla, vehicula sed dictum ut, dapibus ut sem. Fusce at tortor at augue tincidunt viverra. Aliquam aliquam porttitor est pharetra accumsan. Nunc porttitot viverra. Aliquam aliquam porttitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapien risus eleifend urna, sed posuere er
        </p>
        <div id="piece-of-footer"></div>
        <p id="bottom">
         rttitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapittitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapienus eleifend urna, sed posuere er
        </p>
    </div>    
    <div id="footer">LOGO/FOOTER AREA</div>    
</div>

css:

#wrapper{
    width:400px;
    margin:0 auto;
}
#header, #footer{
    padding:20px;
    text-align:center;
    background:#BEBEBE;
}
#content{
    overflow:hidden
}
#content p#top{
    padding-top:10px;
}
#content p#bottom{
    padding-bottom:10px;
}
#piece-of-header{
    width:70px;
    height:70px;
    float:left;
    margin:0 20px 10px 0;
    background:#BEBEBE;
    clear:both;
}
#piece-of-footer{
    margin:12px 0px 0px 10px;
    width:70px;
    height:70px;
    float:right;
    background:#BEBEBE;
}

Style a Div to a Complex Shape

You can do it this way but I agree other ways to do without just using a bunch of divs.