Corner Ribbon Effect in CSS

Posted on
6,668 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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Small business owners are often overwhelmed with the amount of information they need to know to create a successful marketing campaign. One area that can be incredibly confusing is SEO, or search engine optimization. My quick start guide offers tips…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month