CSSリボンを作成する方法

また、 基本寸法 そしてその 背景色 CSSを使って.

 .カード背景色：ベージュ;高さ：300ピクセル。マージン：40px。幅：500ピクセル。  

リボンの中央部分

私たちは使用します CSS変数 （CSS値を保存して再利用することを可能にします） --p に パディング値を格納する. の値 パディング プロパティは var（ - p） それができるようにリボンの左右のパディングのための構文 簡単に拡大. の --p 後で可変になります 複数回再利用;それは私たちのコードを柔軟にする.

 .リボン--p：15px;背景色：rgb（170、170、170）。高さ：60ピクセル。パディング：0 var（ -  p）;幅：100％。  

下のスクリーンショットでは、この時点でデモの外観がどのようになっているかがわかります。

リボンをセンタリングする

我々もする必要があります リボンを中央揃え. 我々 パディングサイズ分左に押します （によってマークされます --p 相対位置を使用する.

 .リボン--p：15px;背景色：rgb（170、170、170）。高さ：60ピクセル。パディング：0 var（ -  p）;位置：相対;右：var（ -  p）;幅：100％。  

更新されたデモ：

リボンの側面

今我々は作成します リボンの左右 それは一見カードの端の周りに曲がるべきです。そうするために、私達は両方を使用します ：前 そして ：後 の擬似要素 .リボン.

両方の擬似要素は、の背景色を継承します。 .リボン, そして私達は フィルタ：明るさ（0.5） 色を少し暗くするようにしてください。彼らはまた 絶対位置 （比較的位置の）親の中に.

それらの幅は パディングサイズと同じ, そして私達はそれらを置きます リボンの左右の端に を使用して 左：0 そして 正しい：0 スタイル規則.

 .リボン：前、リボン：後背景色：継承; content： "; display：block; filter：brightness（0.5）; height：100％; position：absolute; width：var（-p）; .ribbon：before left：0; .ribbon：after 正しい：0; 

両側にリボンを追加したところ、次のようになります。

側面を斜めにする

リボンの側面を作る 曲がって見える, 必要がある 側面を45°傾ける. の 変換：skewy（） CSSルール 要素を垂直方向に傾斜させる.

 .リボン：前左：0;変換：スキュー（45度）。リボン：right：0の後;変換：スキュー（-45度）。  

あなたは側面の端を見ることができるように 整列しない 変換後、我々はする必要があります それらを引き下げる.

側面を合わせる

に 適切な長さを決める 辺を下に動かす必要があるので、三角法に目を向けます。. 私たちが見つける必要があるのは バツ, として よ 辺の幅です（のパディングサイズに等しい） .リボン）と角度 θ 45°（スキュー角）.

結果として バツ それから 半分にする必要があります, 左側と右側もあります.

CSSプリプロセッサを使用しているのであれば 日焼け それ以外の場合は接線チャートまたは電卓を参照してください。 角度の正接値を見つける. 私たちはラッキーだ 日焼け45° です 1, これは、 バツ 等しい よ 私たちの場合には.

 .リボン：前、リボン：後背景色：継承;内容： ";表示：ブロック;フィルター：明るさ（.5）;高さ：100％;位置：絶対値;上：calc（var（-p）/ 2）;幅：var（-p）; 

から バツ 半分にしなければならなかった、我々は使用します calc（） の除算を実行するCSS関数 --p 変数.

最後にする必要があります 辺をz軸に沿って揃える 同様に、それでは追加しましょう。 zインデックス：-1 するために側に支配する リボンの中央部分の後ろに配置する.

 .リボン：前、リボン：後背景色：継承;内容： ";表示：ブロック;フィルター：明るさ（.5）;高さ：100％;位置：絶対;上：calc（var（ -  p）/ 2）;幅：var（ -  p）; z- index：-1; 

辺が揃ったので、CSSリボンは完成です。.

以下では、ライブデモをもう一度チェックすることができます、それは同様にいくつかの追加のスタイルを使用することに注意してください.