Ajax Loader
×

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. 

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Pure CSS3 Smooth Ribbon With Borders

    CSSDeck G+