收藏
回答

这种中间弯曲的导航css代码怎么写出来的?



常规导航就是一个长方形的条,这个是中间弯曲下去一部分。。

有没有老司机给个css方案!

最后一次编辑于  11-22
回答关注问题邀请回答
收藏

6 个回答

  • 大侠大侠
    大侠大侠
    11-22
    <!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>


    无聊看到就写了一下,只能实现到这种效果

    11-22
    赞同 1
    回复 1
    • 美客之家🎊
      美客之家🎊
      11-22
      好的自己感谢!好人一生平安!
      11-22
      回复
  • 啊喵
    啊喵
    11-22

    做过,纯css,分三块,左右只有一角是圆角,中间一个和左右同色的块包裹一个圆,重点是找准圆和左右块的切点

    11-22
    赞同
    回复 8
    • 美客之家🎊
      美客之家🎊
      11-22
      恩  我试试..
      11-22
      回复
    • 美客之家🎊
      美客之家🎊
      11-22
      这样无法处理那样的效果吧!
      11-22
      回复
    • 美客之家🎊
      美客之家🎊
      11-22
      这样看 还不如导航做个图简单。。
      11-22
      回复
    • 啊喵
      啊喵
      11-22回复美客之家🎊
      左右块不对,用flex,中间包裹圆的块固定宽,左右flex1
      11-22
      回复
    • 美客之家🎊
      美客之家🎊
      11-22
      11-22
      回复
    查看更多(3)
  • 美客之家🎊
    美客之家🎊
    11-22

    看看这样的效果。。



    11-22
    赞同
    回复 1
    • 美客之家🎊
      美客之家🎊
      11-22
      来个老司机!
      11-22
      回复
  • 11110111001011110111001110111
    11110111001011110111001110111
    11-22

    你这是看上谁家的产品了?发出来我帮你参考参考

    11-22
    赞同
    回复 2
    • 美客之家🎊
      美客之家🎊
      11-22
      偶尔到的,对方是不是用的svg标签?
      11-22
      回复
    • 11110111001011110111001110111
      11110111001011110111001110111
      11-22回复美客之家🎊
      小程序名称是什么?
      11-22
      回复
  • RU12_
    RU12_
    11-22

    我觉得你可以试试分左中右三块,

    左边的右上角圆角,同理右边,中间的也用圆角 但要放大 才能达到这种很平滑的圆弧,连接处就得你自己调整圆角角度


    一个极端的例子,是个余弦函数那样  都是50%

    11-22
    赞同
    回复 1
    • 美客之家🎊
      美客之家🎊
      11-22
      这样估计也差不多制作类似效果,但是截图看到的并不是分成三块制作,有没有更好的解决方案!
      11-22
      回复
  • 王志鹏
    王志鹏
    11-22

    https://developers.weixin.qq.com/community/develop/article/doc/000caac50f4a38351f19596b35c813  社区看见的技术贴   不知道是不是你要的? 转自o0o有脾气的酸奶

    11-22
    赞同
    回复 3
    • 美客之家🎊
      美客之家🎊
      11-22
      不太像,他哪个有点简单,直接border-radius:50%,就可以轻松解决!!
      11-22
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      11-22回复美客之家🎊
      一张背景图+正方形border-radius:50%+阴影
      11-22
      回复
    • 美客之家🎊
      美客之家🎊
      11-22回复o0o有脾气的酸奶
      无法脱离图片进行制作?
      11-22
      回复
问题标签