公告列表
公告列表
收藏
回答

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



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

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

回答关注问题邀请回答
收藏

6 个回答

  • 大侠大侠
    大侠大侠
    2019-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>


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

    2019-11-22
    有用 1
    回复 1
    • 携企共赢
      携企共赢
      2019-11-22
      好的自己感谢！好人一生平安！
      2019-11-22
      赞
      回复
  • 啊喵
    啊喵
    2019-11-22

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

    2019-11-22
    有用
    回复 8
    • 携企共赢
      携企共赢
      2019-11-22
      恩  我试试..
      2019-11-22
      赞
      回复
    • 携企共赢
      携企共赢
      2019-11-22
      这样无法处理那样的效果吧！
      2019-11-22
      赞
      回复
    • 携企共赢
      携企共赢
      2019-11-22
      这样看 还不如导航做个图简单。。
      2019-11-22
      赞
      回复
    • 啊喵
      啊喵
      2019-11-22回复携企共赢
      左右块不对，用flex，中间包裹圆的块固定宽，左右flex1
      2019-11-22
      赞
      回复
    • 携企共赢
      携企共赢
      2019-11-22
      2019-11-22
      赞
      回复
    查看更多(3)
  • 携企共赢
    携企共赢
    2019-11-22

    看看这样的效果。。



    2019-11-22
    有用
    回复 1
    • 携企共赢
      携企共赢
      2019-11-22
      来个老司机！
      2019-11-22
      赞
      回复
  • Listen
    Listen
    2019-11-22

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

    2019-11-22
    有用
    回复 2
    • 携企共赢
      携企共赢
      2019-11-22
      偶尔到的，对方是不是用的svg标签？
      2019-11-22
      赞
      回复
    • Listen
      Listen
      2019-11-22回复携企共赢
      小程序名称是什么？
      2019-11-22
      赞
      回复
  • RU12_
    RU12_
    2019-11-22

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

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


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

    2019-11-22
    有用
    回复 1
    • 携企共赢
      携企共赢
      2019-11-22
      这样估计也差不多制作类似效果，但是截图看到的并不是分成三块制作，有没有更好的解决方案！
      2019-11-22
      赞
      回复
  • 污昂ᰔᩚ王࿐
    污昂ᰔᩚ王࿐
    2019-11-22

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

    2019-11-22
    有用
    回复 3
请 登录 后发表内容
相关问题
相关文档
问题标签
导航代码css