Cara membuat bentuk separuh segi empat sama dan melengkung menggunakan css dan html

Question

Saya cuba melukis bentuk persis seperti yang diberikan dalam imej di bawah

Ini adalah kod html dan css saya, bentuknya agak serupa dengan ini tetapi dalam satu warna saya tidak tahu bagaimana untuk melakukannya dalam pelbagai warna. Bolehkah sesiapa menerangkan saya bagaimana untuk melakukan ini. Terima kasih terlebih dahulu.

.right-angle-triangle-semicircle {
  width: 100px;
  height: 100px;
  background: #FFA6DF;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 0;
}

<div class="right-angle-triangle-semicircle"></div>

Answer 1

Hanya guna background：线性渐变

Di sini anda boleh melihat dokumentasi tentang Linear-Gradient

.right-angle-triangle-semicircle {
  width: 100px;
  height: 100px;
  background: #FFA6DF;
 background: linear-gradient(-45deg, #f0f0f0 0%, #f0f0f0 50%, #FFA6DF 50%, #FFA6DF 100%);
  
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 0;
}

Answer 2

Dengan hanya menggunakan satu elemen, anda boleh menggunakan beberapa helah CSS untuk mencapai ini.

Tiada nombor ajaib dan ia juga berfungsi untuk saiz elemen yang berbeza.

Selain itu, anda boleh melangkau semua pengisytiharan jejari sempadan ke dalam satu baris.

边框半径：0 0 50% 0;

.right-angle-triangle-semicircle {
  width: 100px;
  height: 100px;
  background: lightgray;
  border-radius: 0 0 50% 0;
  overflow: hidden;
  position: relative;
}

.right-angle-triangle-semicircle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #FFA6DF;
  width: 200%;
  transform: rotate(-45deg);
  transform-origin: bottom left;
}