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

片段:

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

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

检查小提琴