下の畫像にあるものとまったく同じような形狀を描畫しようとしています
これは私の HTML と CSS コードです。形狀はこれに似ていますが、単色ではマルチカラーで行う方法がわかりません。誰かこれを行う方法を説明してもらえますか。前もって感謝します。
リーリー リーリー
背景: 線形グラデーションを使用してください
ここで、Linear-Gradient
に関するドキュメントを參照できます。.直角三角形半円 { 幅: 100ピクセル; 高さ: 100ピクセル; 背景: #FFA6DF; 背景: 線形グラデーション(-45度、#f0f0f0 0%、#f0f0f0 50%、#FFA6DF 50%、#FFA6DF 100%); ボーダー左上の半徑: 0; ボーダー右上半徑: 0; 境界線の右下半徑: 50%; 境界左下の半徑: 0; }
単一の要素のみを使用して、いくつかの CSS トリックを使用してこれを?qū)g現(xiàn)できます。
魔法の數(shù)字はなく、これはさまざまな要素のサイズ設(shè)定にも當(dāng)てはまります。
また、すべての境界半徑の宣言を 1 行にスキップすることもできます。
境界線の半徑: 0 0 50% 0;
.直角三角形半円 { 幅: 100ピクセル; 高さ: 100ピクセル; 背景: ライトグレー; 境界半徑: 0 0 50% 0; オーバーフロー: 非表示; 位置: 相対的; } .right-angle-triangle-semicircle:before { コンテンツ: ""; 位置: 絶対; トップ: 0; 左: 0; 高さ: 100%; 背景: #FFA6DF; 幅: 200%; 変換: 回転(-45度); 変換原點(diǎn): 左下; }