So erstellen Sie halbquadratische und gebogene Formen mit CSS und HTML

Question

Ich versuche, eine Form zu zeichnen, die genau der im Bild unten gezeigten entspricht

Dies ist mein HTML- und CSS-Code, seine Form ähnelt dieser etwas, aber in einer Farbe weiß ich nicht, wie ich es in mehreren Farben machen soll. Kann mir jemand erklären, wie das geht? Dank im Voraus.

.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;
}