<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>test</title> <style> .div { width: 100px; height: 60px; background-color: #FE810F; } .div1 { background-color: white; border-top-right-radius: 100px; margin-right: -5px; } .div2 { width: 150px; height: 120px; border-bottom-left-radius: 75px; border-bottom-right-radius: 75px; } .div3 { background-color: white; border-top-left-radius: 100px; } .circle { width: 100px; height: 100px; background-color: aqua; border-radius: 50%; margin-left: 25px; margin-top: 10px; } </style> <script> </script> </head> <body style="margin: 0"> <div style="background-color: #FE810F;height: 40px"></div> <div style="display: flex;justify-content: center"> <div class="div"> <div class="div div1"></div> </div> <div class="div div2"> <div class="circle"></div> </div> <div class="div"> <div class="div div3"></div> </div> </div> </body> </html> [图片] 无聊看到就写了一下，只能实现到这种效果
这种中间弯曲的导航css代码怎么写出来的？[图片] 常规导航就是一个长方形的条，这个是中间弯曲下去一部分。。 有没有老司机给个css方案！
2019-11-22
获得过 0 次赞
回答过的问题获得 0 次赞
分享过的文章/案例获得 0 次赞
评论与回复获得 0 次赞