Skip to main content

Drawing a diagonal banner over the corner of an image

I wanted to draw a diagonal banner over the corner of an image, to show the word “new”. I’ve seen this in other places (like Apple’s online store) but I hadn’t made my own version of this effect.

An old computer, which is definitely not ‘new’ in any sense.

The trick is to create a wrapper element that contains both the image and the banner, with overflow: hidden that hides the banner when it reaches the edge. Then you use an inner banner element with absolute positioning.

Here’s the code:

<div class="wrapper">
  <div class="banner">NEW</div>
  <img src="computer.jpg">
</div>

.wrapper {
  position: relative;
  overflow: hidden;
}

.banner {
  position: absolute;

  transform: rotate(45deg);

  right:   -35px;
  top:      22px;
  padding: 2px 50px;

  background: red;
  color:      white;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

I don’t fully understand the margin/padding values yet, and I get what I want by tweaking them until I get something that looks right.

If you want the banner to exceed beyond the bounds of the image, you can add some padding to the wrapper element. Here’s what that looks like:

An old computer, which is definitely not ‘new’ in any sense.

And here’s the updated CSS:

.wrapper {
  padding: 5px;

  position: relative;
  overflow: hidden;
}