如何用HTML和CSS制作半方形加弧形的多色自定义形状

针对你需要的多色直角圆角形状，这里提供两种简单易上手的实现方案：

方法一：多背景渐变组合 #

无需额外HTML元素，仅通过CSS背景渐变即可实现颜色分区：

.right-angle-triangle-semicircle {
  width: 100px;
  height: 100px;
  background: 
    /* 左上角粉色区域 */
    linear-gradient(#FFA6DF, #FFA6DF) left top / 50% 50% no-repeat,
    /* 右上角浅蓝色区域 */
    linear-gradient(#86C8BC, #86C8BC) right top / 50% 50% no-repeat,
    /* 右下角黄色半圆区域 */
    radial-gradient(circle at bottom right, #FFD166 50%, transparent 50%);
  border-bottom-right-radius: 50%;
}

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

原理说明 #

• 用linear-gradient定义纯色块，通过位置 / 尺寸的语法精准控制每个色块的范围，no-repeat避免重复填充；
• 用radial-gradient生成右下角的半圆，将渐变中心定位在右下角，50%的半径刚好填满圆角区域。

方法二：伪元素分区 #

通过伪元素创建额外颜色区域，逻辑更直观，适合新手理解：

.right-angle-triangle-semicircle {
  position: relative;
  width: 100px;
  height: 100px;
  background: #FFA6DF; /* 左上角基础颜色 */
  border-bottom-right-radius: 50%;
}

/* 右上角色块 */
.right-angle-triangle-semicircle::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  background: #86C8BC;
}

/* 右下角半圆色块 */
.right-angle-triangle-semicircle::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: #FFD166;
}

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

原理说明 #

• 主元素负责呈现左上角颜色和整体的圆角形状；
• ::before伪元素定位在右上角，填充指定颜色；
• ::after伪元素定位在右下角，通过border-radius:50%形成圆形，完美匹配主元素的圆角区域。

内容的提问来源于stack exchange，提问作者shreyas35