How to code certain css shapes?

Question

I am trying to make the shape below in CSS. Any ideas how to do this? Or know a tutorial site that can help? I am talking about the tag like shapes that are yellow.

Answer 1

To answer your second question first, you use border-radius

div{
    border:1px solid black;
    border-radius:0 0 4px 4px;
    -moz-border-radius:0 0 4px 4px;
    -webkit-border-radius:0 0 4px 4px;
    height:100px;
    width:100px;
    margin:2em;
}

The -moz and -webkit are specific vendor prefixes.

You can change the numbers as you wish, but they follow this pattern

1st # = top left corner
2nd # = top right corner
3rd # = bottom right corner
4th # = bottom left corner

Example: http://jsfiddle.net/9VbFn/

As for the first question, here is a tutorial to help you

http://debiprasad.net/coding-and-logic/create-a-price-tag-using-css

Answer 2

Looking at the tags you could achieve that affect using :before and :after and CSS3 transforms (rotate the before and after psuedo-classes). It'd be best to use a background-image instead, though.

To answer your second query – you can easily achieve that effect with border-radius. e.g.

p {
    -moz-border-radius: 0 0 2px 2px;
    -webkit-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
}

The values are clockwise from the top left corner to the bottom left corner.

Answer 3

The second part of your question is easy: border-radius: 0 0 5px 5px, just replace the 5s with whatever value you wish. The first part, although technically possible with CSS, is better achieved with a background image.

EDIT: Here is a rough version of your tag in CSS to get you started if you really want to give it a shot. http://jsfiddle.net/hsuF3/

Answer 4

First if you want that image exactly you will have to download it and add it to your solution. Once you have you can aplly it either to your link or button or whichever control you want to use. I used a button so i created the following style class and applied it.

.btnLarge_blue { background:url("../images/btn_Large_blue.gif"); width:68px; height:20px; font:12px Calibri; cursor:pointer; border:0px; padding:0px;}

......

Hope this helps :)

Answer 5

Yes; you can do this with pure CSS & with gradient also.

Check this http://jsfiddle.net/9EEEP/3/

with border & circle http://jsfiddle.net/9EEEP/2/

you can adjust the css as per your requirement like this http://jsfiddle.net/9EEEP/5/