CSS を使用して角が折り返されたレスポンシブ リボンを作成する方法

CSS を使用して角が折れたレスポンシブ リボンを作成する

角が折れた CSS リボンは、いくつかの方法を使用して作成できます。 1 つのアプローチは、次のように HTML と CSS を使用して実装することです。

<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>

このメソッドは、斜めの形状を持つ基本的なリボンを作成します。ただし、形状と応答性の柔軟性を高める必要がある場合は、https://css-generators.com/ribbon-shapes/ のような事前に構築されたジェネレーターの使用を検討してください。これらのジェネレーターは、レスポンシブ デザイン プロパティを備えたさまざまなリボン形状を作成するためのカスタマイズ可能なオプションを提供します。

以上がCSS を使用して角が折り返されたレスポンシブ リボンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。