角が折れたレスポンシブ CSS リボンを作成するには?

角を折ったレスポンシブ CSS リボンを作成する方法

CSS でリボンを作成する

角を折ったレスポンシブ CSS リボンを作成することができます次の手順を使用してコーナーを作成します:

1. コンテナを作成します: リボンを保持するコンテナ div を作成します。

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

   ログイン後にコピー

2. 背景の四角形を追加します: リボンを表す単色の背景色を持つ子 div をコンテナ内に追加します。

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

   ログイン後にコピー

3. リボン: コンテナ内に別の子 div を追加し、次のスタイルを適用します:

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

   ログイン後にコピー

代替ソリューション

より複雑でカスタマイズ可能なリボン デザインについては、 https://css-generators.com/ribbon-shapes/ などのリソースを探索できます。この Web サイトでは、さまざまなリボンの形状を選択し、それらの CSS コードを生成できます。

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