How to code certain css shapes? - html

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/

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

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 5

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 :)