How to Create a Responsive CSS Ribbon with a Folded Corner?

How to Create a Responsive CSS Ribbon with Folded Corner

Creating Ribbons with CSS

It is possible to create a responsive CSS ribbon with a folded corner using the following steps:

1. Create a container: Create a container div to hold the ribbon.

   <code class="css">.container {
     width: 200px;
     height: 200px;
     position: relative;
     margin: 20px;
     overflow: hidden;
   }</code>

   Copy after login

2. Add a background rectangle: Add a child div inside the container with a solid background color to represent the ribbon.

   <code class="css">.box {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0.8; /* for demo purpose  */
   }</code>

   Copy after login

3. Create the ribbon: Add another child div inside the container and apply the following styles:

   <code class="css">.stack-top {
     height: 30px;
     z-index: 9;
     margin: 40px; /* for demo purpose  */
     transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
     transition: transform 2s;
     color: #fff;
   }</code>

   Copy after login

Alternative Solution

For more elaborate and customizable ribbon designs, you can explore resources like https://css-generators.com/ribbon-shapes/. This website allows you to select various ribbon shapes and generate the CSS code for them.

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