Html Question posted in
Some basic documentation can be found here.

How do I create a ribbon? – Html

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:

?...
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    If you want 3 separate DOM elements, you can get the desired output using
    transform() with perspective() and rotateY():

    transform-origin: left center;
transform: perspective(100px) rotateY(30deg);

    I’ve added a placeholder image to the last part as requested in you question.

    html, body { height: 100vh; width: 100vw; }

.rib {
    height: 50px;
    width: 200px;
    background: red;
    float: left;
    margin-left: 25px
}

.rir {
    height: 34px;
    width: 200px;
    background: url('https://placehold.co/200x34/eb6a6a/black?text=IMG%20BAR');
    margin-left: 282px;
    margin-top: -42px;
}

.bak {
    margin-left: 225px;
    margin-top: 100px;
    width: 100px;
    height: 50px;
    background: #913535;
    perspective: 800px;
    transform-origin: left center;
    transform: perspective(100px) rotateY(30deg);
}

.text-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
    <div class="container">
   <div class="rib text-center">FOO</div>
   <div class="bak"></div>
   <div class="rir text-center"></div>
</div
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search