How to Create CSS Ribbon Shapes with a Single Element

Use modern CSS tips to create cool CSS ribbon shapes with just a small amount of code! This article will demonstrate how to create various ribbon shapes using single elements and CSS variables and achieve beautiful hover animations without the need for fixed sizes or magic numbers.

Key points:

• Modern CSS tips make it easy to create CSS ribbon shapes, controlled with just a single element and CSS variables, without the need for fixed sizes or magic numbers.
• Creating CSS Ribbon Shapes involves defining variables that control shapes and colors, using clip-path to crop the desired shape, and using box-shadow to create folded parts of the ribbon.
• CSS lh Units (corresponding to line-height values) are used to control the height of the ribbon and can be used in conjunction with clip-path and CSS variables to create excellent hover animations.
• Creating a rotating CSS ribbon shape involves using new trigonometric functions and CSS variables and calc(), crop the parts of the main element with gradient colors, and create the parts behind the main element with pseudo-elements.

This article will explore in-depth ways to create two types of CSS ribbon shapes: folded ribbon and rotary ribbon.

Create a folded CSS ribbon shape

First, define the variables that define the shape of the ribbon:

<code class="language-css">.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}</code>

Next, mainly use the clip-path attribute. The following figure shows the polygon shape to be used:

Add the inner margin to avoid cropping the text, and then apply clip-path:

<code class="language-css">.ribbon {
  --r: 20px; 
  --s: 20px; 
  --c: #d81a14;

  line-height: 1.6; /* 控制高度 */
  padding-inline: 1.2lh calc(var(--r) + .2lh);
  background: var(--c);
  clip-path: polygon(1lh 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,100% 100%, 0 100%,0 100%); 
}</code>

Use CSS lh unit

lh units correspond to line-height values. Since using single-line text, line-height sets the control height, 1lh is equivalent to the height of the element. In clip-path, it is necessary to cut the shape of an isosceles triangle. For this purpose, you need to know the height of the element, and 1lh is equal to that height.

To create a collapsed section, still use clip-path and update the previous polygon. The cleverness of clip-path is that it can crop the content "outside" of the element's boundary. By adding box-shadow, the outer clipped part can be made visible.

Update clip-path to contain four new points, three of which are outside the element:

<code class="language-css">.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}</code>

Finally, add a gradient and another box-shadow to complete the shadow effect.

(The hover animation code and the detailed code for the rotating ribbon are omitted here, because the length is too long, but the key images and code snippets are retained. The complete code can be found on CodePen, as shown in the original text. )

Conclusion

This article explores modern CSS features such as CSS variables, calc() and trigonometric functions, and combines them to create cool ribbon shapes. For more examples, please refer to the complete collection in the original link.

The above is the detailed content of How to Create CSS Ribbon Shapes with a Single Element. For more information, please follow other related articles on the PHP Chinese website!