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.

enter image description here

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

Yes, but not all CSS3 properties are fully supported in all browsers, hence the question. Making some of these shapes is easier in CSS3 but they won't look right in ie for example and might render a little different cross browser. — aziz punjani
– aziz punjani, Commented Nov 4, 2011 at 13:18
@Interstellar_Coder Not all CSS2 properties are fully supported in all browsers — robertc
– robertc, Commented Nov 4, 2011 at 13:20
Yes robert, they aren't. But, in this particular case it's easier to find a solution that will render cross browser using CSS2 properties rather than CSS3 properties. For example the triangle could be created using the border property. howtocreate.co.uk/tutorials/css/slopes — aziz punjani
– aziz punjani, Commented Nov 4, 2011 at 13:24

Jason Gennaro · Accepted Answer · 2011-11-04 13:09:07Z

7

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

answered Nov 4, 2011 at 13:09

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sandeep · Accepted Answer · 2011-11-04 13:45:17Z

6

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/

edited Nov 4, 2011 at 13:45

answered Nov 4, 2011 at 13:25

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Comments

Nate B · Accepted Answer · 2011-11-04 13:20:06Z

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/

edited Nov 4, 2011 at 13:20

answered Nov 4, 2011 at 13:10

Nate B

6,34428 silver badges23 bronze badges

Comments

Chris · Accepted Answer · 2011-11-04 13:10:39Z

0

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.

answered Nov 4, 2011 at 13:10

Chris

3,79525 silver badges30 bronze badges

Comments

Shinobi_Lunga · Accepted Answer · 2011-11-04 13:16:34Z

0

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

answered Nov 4, 2011 at 13:16

Shinobi_Lunga

1061 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to code certain css shapes?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related