Curved Ribbon with Hover Effect Using CSS

This code creates a stylish curved ribbon with a hover effect using CSS. The ribbon’s color, cutout part, and animation angle are customizable. The ribbon responds to cursor hover, smoothly transitioning to a specified angle. Useful for adding an eye-catching decorative element to your webpage.

How to Create Curved Ribbon With Hover Effect Using CSS

1. First of all, include the following HTML snippet in your webpage, placing it where you want the ribbon to appear.

<h2 class="ribbon">A Cool Ribbon</h2>

2. In the CSS code, variables like --c (color), --r (cutout part), and --a (animation angle) can be adjusted to personalize the ribbon. Experiment with these variables to achieve your desired look.

The .ribbon class represents the main ribbon container, and the :before and :after pseudo-elements create the ribbon edges. The --a variable controls the animated angle, triggered on hover.

@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

.ribbon {
  --c: #60b0a7;
  /* control the cutout part (adjust each variable to understand what it does) */
  --r: .8em;  
  --a:  0deg; /* this will get animated */
  --d: .5em;

  padding-inline: .3em;
  margin: calc(.5lh + var(--r)) calc(1.2lh + var(--d));
  line-height: 1.75;
  background: var(--c);
  position: relative;
  white-space: nowrap;
  transition: --a .6s;
  cursor: pointer;
}
.ribbon:hover {
  --a: 60deg; 
}
.ribbon:before,
.ribbon:after {
  content: "";
  position: absolute;
  width: calc(1lh + var(--d));
  height: calc(1.5lh + var(--r));
  border: solid var(--c);
  box-sizing: border-box;
  rotate: calc(var(--a) - 90deg);
}
.ribbon:before {
  left: 99%;
  top: 0;
  border-width: 1lh 1lh 0 0;
  border-radius: 0 999px 0 0;
  clip-path: polygon(calc(999px*cos(var(--a))) calc(1lh + var(--d) - 999px*sin(var(--a))),999px 100%,100% 100%,calc(50% + var(--d)/2) calc(100% - var(--r)),var(--d) 100%,0 100%, 0 calc(1lh + var(--d)));
  transform-origin: 0 calc(1lh + var(--d));
}
.ribbon:after {
  right: 99%;
  bottom: 0;
  border-width: 0 0 1lh 1lh;
  border-radius: 0 0 0 999px;
  clip-path: polygon(calc(100% - 999px*cos(var(--a))) calc(100% - 1lh - var(--d) + 999px*sin(var(--a))),-999px 0,0 0,calc(50% - var(--d)/2) var(--r),calc(100% - var(--d)) 0,100% 0, 100% calc(100% - 1lh - var(--d)));
  transform-origin: 100% calc(100% - 1lh - var(--d));
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  font-size: 31px;
  font-family: sans-serif;
  font-weight: bold;
  color: #fff;
  background: #F9CDAD;
}

As the cursor hovers over the ribbon, the --a variable smoothly transitions, creating an engaging hover effect. Customize the hover angle by adjusting the value in .ribbon:hover { --a: 60deg; }.

Modify the --d variable to control the spacing between the ribbon and the surrounding elements. Adjust the --r variable to alter the cutout part’s size.

That’s all! hopefully, you have successfully created a Curved Ribbon with the hover effect on your website. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.