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

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.