Comment créer des formes demi-carrées et courbes en utilisant CSS et HTML

Question

J'essaie de dessiner une forme exactement comme celle donnée dans l'image ci-dessous

C'est mon code html et css, sa forme est un peu similaire à celle-ci mais en monochrome je ne sais pas comment le faire en multicolore. Quelqu'un peut-il m'expliquer comment faire cela. Merci d'avance.

.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

Utilisez simplement background：线性渐变

Ici, vous pouvez consulter la documentation sur 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

En utilisant un seul élément, vous pouvez utiliser quelques astuces CSS pour y parvenir.

Il n'y a pas de nombre magique et cela fonctionne également pour différentes tailles d'éléments.

En outre, vous pouvez ignorer toutes les déclarations de rayon de bordure sur une seule ligne.

边框半径：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;
}