Is it possible to make a squiggly line?

前端 未结 12 1690
无人及你
无人及你 2021-02-01 19:04

If I wanted to make a horizontal line, I would do this:




        
12条回答
  •  暖寄归人
    2021-02-01 19:33

    Instead of using the border, use a tiled background image.

    I do not think there is a solution that get's away without using a graphics file and that also works in all browsers.

    If you are brave you can try this:http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/

    It allows to draw on the canvas in HTML5, but it would not work on older browsers.

    if you can add a lot of html you can use this: http://jsfiddle.net/QsM4J/

    HTML:

    
        

    before

    after

    CSS:

    #sqig{
        position:relative;
        width:400px;
        height:6px;
    }
    #sqig div{
        position:relative;
        width:6px;
        height:6px;
        display: inline-block;
        margin:0 0 0 -4px;
        padding:0;    
    }
    #sqig .topsqig div{
        border-radius: 3px;
        top:1px;
        border-top: 1px solid #000;
    }
    #sqig .bottomsqig div{
        border-radius: 3px;
        top:-1px;
        border-bottom: 1px solid #000;
    }
    

提交回复
热议问题