国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

CSSとHTMLを使用して半正方形と曲線の形狀を作成する方法
P粉797004644
P粉797004644 2024-02-25 19:57:15
0
2
686

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

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

リーリー リーリー

P粉797004644
P粉797004644

全員に返信(2)
P粉808697471

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

ここで、Linear-Gradient

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

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

単一の要素のみを使用して、いくつかの 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): 左下;
}
最新のダウンロード
詳細(xì)>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート