css 标题三条横线

HTML:

   

    <div class="rule-title">
        <div class="menu-icon"><div>
            活动*规则
        <div class="menu-icon"><div>
    </div>

 

 

 

CSS:

    .rule-title {
        font-weight: bold;
        margin: 30px auto;
        font-size: 32px;
    }
    /* 3条横线 */
    .rule-title .menu-icon {
        display: inline-block;
        width: 50px;
        height: 2px;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
       
        padding: 5px 0;
        margin: 0 10px 10px;
        background-clip: content-box; 
        /* 
            background-clip: 规定背景的绘制区域。
                border-box-----背景被裁剪到边框盒；
                padding-box-----背景被裁剪到内边距框；
                content-box-----背景被裁剪到内容框；
        */
    }