単一の要素でCSSリボン形状を作成する方法

最新のCSSのヒントを使用して、わずかなコードでクールなCSSリボン形状を作成します！この記事では、単一の要素とCSS変数を使用してさまざまなリボン形状を作成し、固定サイズやマジック番号を必要とせずに美しいホバーアニメーションを実現する方法を示します。

キーポイント：

• 最新のCSSのヒントにより、固定サイズやマジック番号を必要とせずに、単一の要素とCSS変数で制御されたCSSリボン形状を簡単に作成できます。
• CSSリボンシェイプの作成には、形状と色を制御する変数を定義し、clip-pathを使用して目的の形状をトリミングし、box-shadowを使用してリボンの折り畳まれた部分を作成します。
• csslhunits（line-height値に対応）は、リボンの高さを制御するために使用され、clip-pathおよびCSS変数と組み合わせて使用​​して、優れたホバーアニメーションを作成できます。
• 回転するCSSリボン形状の作成には、新しい三角関数とCSS変数を使用し、calc()を使用して、メイン要素の部分をグラデーション色でトリミングし、擬似エレメントでメイン要素の後ろの部分を作成します。

この記事では、折り畳まれたリボンとロータリーリボンの2種類のCSSリボンシェイプを作成するための詳細な方法について説明します。

折り畳まれたCSSリボン形状を作成します

最初に、リボンの形状を定義する変数を定義します。

次に、主に

.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}

属性を使用します。次の図は、使用するポリゴンの形状を示しています。

clip-path

テキストのトリミングを避けるために内側のマージンを追加してから、：

を適用します

clip-path

css lh unit

.ribbon {
  --r: 20px; 
  --s: 20px; 
  --c: #d81a14;

  line-height: 1.6; /* 控制高度 */
  padding-inline: 1.2lh calc(var(--r) + .2lh);
  background: var(--c);
  clip-path: polygon(1lh 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,100% 100%, 0 100%,0 100%); 
}

を使用します 単位は

値に対応しています。シングルラインテキストを使用するため、

はコントロールの高さを設定するため、lhは要素の高さに相当します。 line-heightでは、この目的のために、イソシェルの三角形の形状をカットする必要があります。 line-height 1lh clip-path1lh

崩壊したセクションを作成するには、

を使用し、以前のポリゴンを更新します。 の賢さは、要素の境界の「外側」のコンテンツをトリミングできることです。

を追加することにより、外側のクリップされた部分を表示できます。

clip-path clip-pathbox-shadow

更新clip-path 4つの新しいポイントを含むには、そのうち3つは要素の外側にあります。

.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}

最後に、勾配と別の

を追加して、シャドウエフェクトを完成させます。 box-shadow

（長さが長すぎるが、キーイメージとコードスニペットが保持されているため、ホバーアニメーションコードと回転リボンの詳細なコードはここでは省略されています。元のテキストに表示されます 結論

この記事では、CSS変数、​​、三角関数などの最新のCSS機能を調査し、それらを組み合わせてクールなリボン形状を作成します。 その他の例については、元のリンクの完全なコレクションを参照してください。

以上が単一の要素でCSSリボン形状を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。