HTML+CSS 实现两只 圆锥渐变 合并形成的光台样式

1. 镜面水平翻转法

源码

<div id="tBox1">
    <div class="ta" id="t1"></div>
    <div class="ta" id="t2"></div>
</div>

<style>
    #tBox1 {
        display: flex;
    }
    
    .ta {
        width: 50%;
        padding-bottom: 56.25%;
        background: conic-gradient(from 90deg, blue, #6cf);
    }
    
    #t2 {
        transform: rotateY(180deg);
    }
</style>

2. 水平相反方向渐变法

源码

<div id="tBox2">
    <div class="tb" id="t3"></div>
    <div class="tb" id="t4"></div>
</div>

<style>
    #tBox2 {
        display: flex;
    }
    
    .tb {
        width: 50%;
        padding-bottom: 56.25%;
    }
    
    #t3 {
        background: conic-gradient(from 90deg, blue, #6cf);
    }
    
    #t4 {
        background: conic-gradient(from 270deg, #6cf, blue);
    }
</style>