Home  >  Article  >  Web Front-end  >  How to Create a Responsive Ribbon with a Folded Corner using CSS?

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

DDD
DDDOriginal
2024-10-31 02:33:02895browse

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

Creating a Responsive Ribbon with Folded Corner using CSS

Creating a CSS ribbon with a folded corner can be achieved using several methods. One approach is to implement it with HTML and CSS as follows:

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

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8; /* for demo purpose */
}

.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>
<code class="html"><div class="container">
  <div class="box" style="background: #fffff3;"></div>
  <div class="box stack-top" style="background: #242424;">      1Month</div>
</div></code>

This method creates a basic ribbon with a diagonal shape. However, if you need greater flexibility in shape and responsiveness, consider using a pre-built generator like this: https://css-generators.com/ribbon-shapes/. These generators offer customizable options for creating various ribbon shapes with responsive design properties.

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn