I'm having the problem with putting this shape into my website. I design this black shape as a frame to put image in but when it comes to coding, i don't know how to draw the shape in css. (Because I can't slice this shape in photoshop ) Can someone teach me or show me the css code to draw this ?

Thanks

Edited October 27, 201115 yr by killyblame

.Box {

-webkit-border-radius: 20px; /* Saf3-4, iOS 1-3.2, Android <1.6 */

-moz-border-radius: 20px; /* FF1-3.6 */

border-radius: 20px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

background-image: url(Images/Background_Black_01.png);

height: 163px;

width: 300px;

}

 

This will make the shape you require but I don't know what image/info you want to put in it or it's size, I've attached the image and a screen shot of how I make it in Adobe Illustrator.

Open Ai and make a new Doc Use the rounded-Rectangle-Tool to draw the box 0 stroke, fill black, Switch to the pen tool and add 4 anchor points 2 on the top 2 on the bottom where the cut out bit is use the Direct selection tool to move the anchors to get the required shape. Save for Web& Device as a .png and tick transparency, resize the css about to the requires size.

 

Hope this helps

Nick

thanks u very much