<html> <div id="tBox1"> <div class="ta" id="t1"></div> <div class="ta" id="t2"></div> </div> </html> <style> #tBox1 { display: flex; } .ta { width: 50%; padding-bottom: 56.25%; background: conic-gradient(from 90deg, blue, #6cf); } #t2 { transform: rotateY(180deg); } </style>
<html> <div id="tBox2"> <div class="tb" id="t3"></div> <div class="tb" id="t4"></div> </div> </html> <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>
← 冰墩墩 流光溢彩字→
HTML+CSS 实现两只 圆锥渐变 合并形成的光台样式
Maoyl's blog Maoyl's blog HTML+CSS 实现两只 圆锥渐变 合并形成的光台样式