CSSとHTMLを使用して半正方形と曲線の形状を作成する方法

Question

下の画像にあるものとまったく同じような形状を描画しようとしています

これは私の HTML と CSS コードです。形状はこれに似ていますが、単色ではマルチカラーで行う方法がわかりません。誰かこれを行う方法を説明してもらえますか。前もって感謝します。

リーリー リーリー

Answer 1

背景: 線形グラデーションを使用してください

ここで、Linear-Gradient

に関するドキュメントを参照できます。

.直角三角形半円 {
  幅: 100ピクセル;
  高さ: 100ピクセル;
  背景: #FFA6DF;
 背景: 線形グラデーション(-45度、#f0f0f0 0%、#f0f0f0 50%、#FFA6DF 50%、#FFA6DF 100%);
  
  ボーダー左上の半径: 0;
  ボーダー右上半径: 0;
  境界線の右下半径: 50%;
  境界左下の半径: 0;
}

Answer 2

単一の要素のみを使用して、いくつかの CSS トリックを使用してこれを実現できます。

魔法の数字はなく、これはさまざまな要素のサイズ設定にも当てはまります。

また、すべての境界半径の宣言を 1 行にスキップすることもできます。

境界線の半径: 0 0 50% 0;

.直角三角形半円 {
  幅: 100ピクセル;
  高さ: 100ピクセル;
  背景: ライトグレー;
  境界半径: 0 0 50% 0;
  オーバーフロー: 非表示;
  位置: 相対的;
}

.right-angle-triangle-semicircle:before {
  コンテンツ： "";
  位置: 絶対;
  トップ: 0;
  左: 0;
  高さ: 100%;
  背景: #FFA6DF;
  幅: 200%;
  変換: 回転(-45度);
  変換原点: 左下;
}