HTML CSS Exercise: Create corner ribbon with CSS3
Solution:
HTML Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Corner Ribbon with CSS3 Example</title>
<style type="text/css">
.ribbon {
background-color: #a00;
overflow: hidden;
white-space: nowrap;
/* top left corner */
position: absolute;
left: -50px;
top: 40px;
/* for 45 deg rotation */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* for creating shadow */
-webkit-box-shadow: 0 0 10px #888;
-moz-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
}
.ribbon a {
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 1px 0;
padding: 10px 50px;
text-align: center;
text-decoration: none;
/* for creating shadow */
text-shadow: 0 0 5px #444;
}
</style>
</head>
<body>
<div class="ribbon">
<a href="#">Best value pack</a>
</div>
</body>
</html>
Live Demo:
See the Pen corner-ribbon-answer by w3resource (@w3resource) on CodePen.
Supported browser
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends
- Python Interview Questions and Answers: Comprehensive Guide
- Scala Exercises, Practice, Solution
- Kotlin Exercises practice with solution
- MongoDB Exercises, Practice, Solution
- SQL Exercises, Practice, Solution - JOINS
- Java Basic Programming Exercises
- SQL Subqueries
- Adventureworks Database Exercises
- C# Sharp Basic Exercises
- SQL COUNT() with distinct
- JavaScript String Exercises
- JavaScript HTML Form Validation
- Java Collection Exercises
- SQL COUNT() function
- SQL Inner Join