Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Create custom div element with special shape dynamically

Create custom div element with special shape dynamically

Problem

I want to create some shapes like this :

These are 3 shapes.Then i want put some element on this shape. I try to using border-radius property but it can't generate this shape. Also i try to use , and but i have problem with put elements on it. What's your idea about it?

Problem courtesy of: Saman Gholami

Solution

You just gotta be creative:

HTML:

CSS:

   #circle { 
       width: 140px;
       height: 140px;
       background: red; 
       -moz-border-radius: 70px; 
       -webkit-border-radius: 70px; 
       border-radius: 70px;
        margin: 0 auto;
        position: relative;
        top: -50px;
    }

    #innerCircle { 
       width: 90px;
       height: 90px;
       background: white; 
       -moz-border-radius: 70px; 
       -webkit-border-radius: 70px; 
       border-radius: 70px;
        position: absolute;
        top: 25px;
        right: 25px;
    }

    #rect1 {
        width: 20px; 
       height: 90px; 
       background: white;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
        position: absolute;
        top: 50%;
        left: 5px;
    }

    #rect2 {
       width: 20px; 
       height: 90px; 
       background: white;
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Safari and Chrome */
        position: absolute;
        top: 50%;
        right: 5px;
    }

    #cover {
       width: 150px; 
       height: 80px; 
       background: white;
        position: absolute;
        top: 0px;
        left: 0px;
    }

http://jsfiddle.net/bnSe7/

Or you can do something like this, curving the sides and using CSS3 rotate features to get the three shapes:

http://jsfiddle.net/RqWtC/1/

You will probably have to use HTML5 canvas to achieve the exact complex shapes you're requesting:

http://www.html5canvastutorials.com/tutorials/html5-canvas-custom-shapes/

Solution courtesy of: Michael Rader

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Create custom div element with special shape dynamically

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×