HTML CSS Exercise: Create corner ribbon with CSS3

Last update on March 04 2024 06:50:49 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8><!-- Define the character encoding for the document -->
<title>Corner Ribbon with CSS3 Example</title><!-- Set the title of the document -->
<style type="text/css">
 .ribbon {
background-color: #a00; /* Set the background color of the ribbon */
overflow: hidden; /* Hide any content that overflows the ribbon */
white-space: nowrap; /* Prevent wrapping of text within the ribbon */
  /* top left corner */
position: absolute; /* Position the ribbon absolutely within its containing element */
left: -50px; /* Position the ribbon 50 pixels to the left of its containing element */
top: 40px; /* Position the ribbon 40 pixels from the top of its containing element */
  /* for 45 deg rotation */
  -webkit-transform: rotate(-45deg); /* Rotate the ribbon -45 degrees for webkit browsers */
     -moz-transform: rotate(-45deg); /* Rotate the ribbon -45 degrees for Mozilla browsers */
      -ms-transform: rotate(-45deg); /* Rotate the ribbon -45 degrees for Microsoft browsers */
       -o-transform: rotate(-45deg); /* Rotate the ribbon -45 degrees for Opera browser */
transform: rotate(-45deg); /* Rotate the ribbon -45 degrees */
  /* for creating shadow */
  -webkit-box-shadow: 0 0 10px #888; /* Add a box shadow for webkit browsers */
     -moz-box-shadow: 0 0 10px #888; /* Add a box shadow for Mozilla browsers */
box-shadow: 0 0 10px #888; /* Add a box shadow */
}
.ribbon a {
border: 1px solid #faa; /* Add a 1 pixel solid border around the ribbon link */
color: #fff; /* Set the color of the text within the ribbon link */
display: block; /* Display the link as a block element */
font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Set the font properties */
margin: 1px 0; /* Set the margin for the ribbon link */
padding: 10px 50px; /* Set the padding for the ribbon link */
text-align: center; /* Center-align the text within the ribbon link */
text-decoration: none; /* Remove the underline decoration from the link */
  /* for creating shadow */
text-shadow: 0 0 5px #444; /* Add a text shadow to the link */
}
</style>
</head>
<body>
<div class="ribbon">
<a href="#">Best value pack</a><!-- Create a link with text "Best value pack" -->
</div>
</body>
</html>

Explanation:

This HTML and CSS code creates a ribbon-like element with CSS3.
The ribbon is styled with CSS to have a background color, text, border, and shadow effects.
The ribbon is positioned using absolute positioning and transformed to create a rotated appearance.
The text inside the ribbon link is styled to be centered and have no underline decoration.
The ribbon link has a shadow effect applied to it.

Live Demo:

See the Pen corner-ribbon-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes