htmlcsscss-shapesribbon

How do I create a ribbon?

I wanted to create a Ribbon in my current project, but since I've never used ribbons before I dont even know how start...

The ribbon should look like this:

ExampleRibbon

On the last longer part I want to add an image inside. Other parts (first light-red and second dark-red parts have to be empty). I saw many examples online, but nothing that looked like this. Hope someone can help me here...

HTML:

<div class=header-ribbon>
   ...
   ...
   <img...>
</div>

CSS:

?...
Solution

  • clip-path with gradient can do it.

    I used CSS variable so you can easily control the shape:

    .ribbon {
  --p1: 30%;
  --p2: 60%;
  --d: 20%;

  width: 300px;
  height: 100px;
  background: linear-gradient(90deg, red var(--p1), darkred 0 var(--p2), red 0);
  clip-path: polygon(0 0, var(--p1) 0,var(--p2) var(--d), 100% var(--d), 100% calc(100% - var(--d)), var(--p2) calc(100% - var(--d)), var(--p1) 100%, 0 100%)
}
    <div class="ribbon"></div>