body, html {

    width: 100%;

    height: 100%;

    display: flex;

    background: #fff;

}

​

​

div {

    position: relative;

    margin: auto;

    width: 300px;

    height: 200px;

}

​

div:nth-child(1) {

    background: 

      linear-gradient(

        90deg, 

        #333 0 50%, 

        transparent 0 100%

      );

    background-repeat: repeat-x;

    background-size: 4px 1px;

    background-position: 0 0;

}

​

div:nth-child(2) {

    background: 

        linear-gradient(

            90deg, 

            #f00 0 50%, 

            transparent 0 100%

        );

    background-repeat: repeat-x;

    background-size: 20px 2px;

    background-position: 0 0;

}

​

div:nth-child(3) {

    background: 

        linear-gradient(

            90deg, 

            #0fc 0 70%, 

            transparent 0 100%

        );

    background-repeat: repeat-x;

    background-size: 30px 3px;

    background-position: 0 0;

}

​