Corner Ribbon Effect in CSS

1. Create a new class by typing ".Ribbon"

2. Define the class' "display:" as "inline-block"

3. Define its "position:" as "relative"

4. Define its "overflow:" as "hidden" to achieve the "folded-over" effect

5. Define its "padding:" to specify the distance the ribbon will be from the image (how high it'll "hover")

6. Now style all paragraphs within the class by typing ".Ribbon p" - Define its "display:" as "inline-block", its "position:" as "absolute", and place it 0px from the top and -45px from the left. - Define its "text-align:" as "center" - Define "background-color:" to specify a color for the ribbon - Define "width:" to specify the length of the ribbon; for a shorter ribbon in the very corner go with a smaller value - Create the diagonal ribbon effect by defining the "transform:" property to rotate(-45deg). Note that the degree of transformation is the same as the left positioning - Add a drop shadow with the "box-shadow:" property. Note for maximum browser compatibility, both the "transform:" and "box-shadow:" properties will need to be copied over with compatibility prefixes

7. To use the ribbon, in the HTML place both an image and a paragraph inside the <div> tag for the class you created. Inside the paragraph, type the text you want on the ribbon