如何使用 css 和 html 創建半正方形和彎曲形狀的形狀

Question

我正在嘗試繪製一個與下圖中給出的形狀完全相同的形狀

這是我的 html 和 css 程式碼，它的形狀與此有點相似，但在單色中我不知道如何在多色中做到這一點。誰能解釋一下我該怎麼做。提前致謝。

.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

只要使用background：線性漸層

在這裡您可以查看有關 線性- 的文檔漸層

#.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

僅使用單一元素，您可以使用一些 CSS 小技巧來實現此目的。

沒有魔法數字，也適用於不同的元素大小調整。

此外，您可以將所有邊框半徑宣告跳過到一行。

邊框半徑：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;
}