w3resource

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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.

HTML-CSS: Tips of the Day

How to turn off word wrapping in HTML?

You need to use the CSS white-space attribute.

In particular, white-space: nowrap and white-space: pre are the most commonly used values. The first one seems to be what you 're after.