多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
效果图:![](https://box.kancloud.cn/725de3b318d013c51ff91ef7757f652b_260x99.png) ``` <div class="test"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> ``` ``` <style> .test { position: relative; margin-top: 20px; }.left { position: absolute; top: 0; width: 50px; height: 50px; line-height: 100px; display: block; text-align: center; background-image: radial-gradient(200px at 0px 0px, #fff 50px, #4ebaba 50px); } .middle { width: 150px; height: 50px; background: #4ebaba; position: absolute; top: 0; margin-left: 50px; border-top-right-radius: 10px; border-top-left-radius: 10px; } .right { position: absolute; top: 0; margin-left: 200px; width: 50px; height: 50px; line-height: 100px; display: block; text-align: center; background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4ebaba 50px); } </style> ```