Watch Corner Ribbon Effect in CSS

Posted on
6,629 Points
3 Endorsements
Last Modified:
Experience Level: Beginner
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS

Video Steps

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


Suggested Videos

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month