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.

Also secondly does anyone know how to make a shape with css that is a square/rectangle that has two rounded edges at the bottom but right angled corners at the top?

Thanks!

James

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

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/