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
.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 (
.base class. Then they are positioned absolutey and colored accordingly.
Feel free to use the code below.