Pure CSS3 Smooth Ribbon With Borders
Subtle and smooth ribbon made purely out of CSS3. The ribbon shape is created using 3 elements with classes .base, .left_corner and .right_corner respectively. The corners are just squares that are rotated and moved to left/right to create the ribbon shape.
The shadow at the top is just an oval shape with box-shadow property positioned absolutely. It has a negative top offset to make the ribbon look like it's coming from under something.
The borders on the ribbon are created using dashed borders applied on the pseudo elements (:after and :before) of .base class. Then they are positioned absolutey and colored accordingly.
Feel free to use the code below.