css三角形顶部，圆形底部有不同的颜色

Question

如何为三角形添加不同颜色的圆底？

 #box {
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 150px 150px 150px;
    border-color: transparent yellow red blue;
    position: relative;
 }

制作：

我需要的是底部的绿色部分，圆角：

Answer 1

我认为这会对你有帮助

#box {
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 150px 150px 150px;
    border-color: transparent yellow red blue;
    position: relative;
 }
 #box:before{
    content: '';
    width: 300px;
    height:  300px;
    display: block;
    background-color:green;
    border-radius: 50%;
    position: absolute;
    left: -150px;
    z-index: -1;
 }

<强>段：

＆＃13;

＆＃13;

#box {
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 150px 150px 150px;
    border-color: transparent yellow red blue;
    position: relative;
 }
 #box:before{
   content: '';
   width: 300px;
   height:  300px;
   display: block;
   background-color:green;
   border-radius: 50%;
   position: absolute;
   left: -150px;
   z-index: -1;
 }

＆＃13;

<div id="box"></div>

＆＃13;

＆＃13;

＆＃13;

检查 fiddle

Answer 2

.bottom {
  height: 150px;
  width: 300px;
  background:green;
  border-bottom-left-radius: 300px;
  border-bottom-right-radius: 300px;
}

 #box {
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 150px 150px 150px;
    border-color: transparent yellow red blue;
 }

<div id="box"></div>

<div class="bottom"></div>