ホームページ  >  記事  >  ウェブフロントエンド  >  CSS を使用して角が折り返されたレスポンシブ リボンを作成する方法

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

DDD
DDDオリジナル
2024-10-31 02:33:02895ブラウズ

How to Create a Responsive Ribbon with a Folded Corner using 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。