Question 240146 in CSS Question posted in
Some basic documentation can be found here.

CSS Ribbon Placement & Size

I am using the following code to display a ribbon in the upper right corner of a div and would like some help in moving this to the left hand side with the ribbon stripes on the right hand side (reversed):

The following HTML is placed within the div:

.ribbon {
  --f: 1px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 5px; /* the top offset */
  
  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 10px var(--f) calc(10px + var(--r));
  clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
  background: #ea0;
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}
<span class="ribbon">Ribbon Text</span>

I have tried using different inset and padding values, but this doesn’t seem to shift the ribbon from right to left and reverse the stripes.

Can someone please point me in the right direction on which values to change?

Thank you

Tags:

2

Answers


  1. 0
    1. In the .ribbon CSS class:
      • inset property: In the original code, the inset property was set to place the ribbon on the upper right corner of the div. To move the ribbon to the left side, I modified the values to var(--t) auto auto calc(-1 * var(--f)). This sets the top offset (var(--t)) and the right offset (calc(-1 * var(--f))) to position the ribbon on the left side.
      • padding property: To adjust the spacing and positioning of the text within the ribbon, I changed the values to 0 calc(10px + var(--r)) var(--f) 10px. This helps center the text within the ribbon.
      • clip-path property: The clip-path property defines the shape of the ribbon. I updated the polygon coordinates to reverse the direction of the stripes. Specifically, I changed the order of the points to achieve this effect.

    These changes collectively shift the ribbon to the left side of the div and reverse the direction of the stripes, creating the desired visual effect.

    Updated CSS:

    .ribbon {
  --f: 1px; /* control the folded part */
  --r: 15px; /* control the ribbon shape */
  --t: 5px; /* the top offset */

  position: absolute;
  inset: var(--t) auto auto calc(-1 * var(--f));
  padding: 0 calc(10px + var(--r)) var(--f) 10px;
  clip-path: 
    polygon(0 0, 100% 0, calc(100% - var(--f)) calc(100% - var(--f)), 0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2), 0 var(--f));
  background: #ea0;
  box-shadow: 0 calc(-1 * var(--f)) 0 inset #0005;
}
    Login or Signup to reply.
  2. 0

    It seems you don’t want the folded part so you can simplify the code like below:

    .ribbon {
  position: absolute;
  top: 10px;
  left: 0;
  padding: 5px 40px 5px 5px;
  background: conic-gradient(from 45deg at calc(100% - 30px) 50%,#0000 90deg,#ea0 0);
}
    <span class="ribbon">Ribbon Text</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search