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.