css如何实现菜单直线中间凸起的部分，请指教，谢谢

Question

Answer 1

        .line{
            position: relative;
            width: 100%;
            height: 20px;
            border: solid 1px #ccc;
        }
        .line:before{
            position: absolute;
            top: -16px; left: 45%;
            content: '';
            width: 0; height: 0;
            border-style: dashed dashed solid dashed;
            border-width: 8px;
            border-color: transparent transparent #ccc transparent;
        }
        .line:after{
            position: absolute;
            top: -14px; left: 45%;
            content: '';
            width: 0; height: 0;
            border-style: dashed dashed solid dashed;
            border-width: 8px;
            border-color: transparent transparent #fff transparent;
        }