Is it possible to make a squiggly line?

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

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




        
12条回答
  •  面向向阳花
    2021-02-01 19:37

    Pure CSS solution:

    We can use the sin wave character '∿' character and then

    Set a negative value for letter-spacing

    FIDDLE

    enter image description here

    Just for fun we can use different characters to get other squiggles:

    FIDDLE #2

    div {
      font-size: 50px;
      font-family: verdana;
    }
    .tilde {
      letter-spacing: -19px;
    }
    .ohm {
      letter-spacing: -6px;
    }
    .ac {
      letter-spacing: -25px;
    }
    .acd {
      letter-spacing: -11px;
    }
    .curlyv {
      letter-spacing: -12px;
    }
    .frown {
      letter-spacing: -13px;
    }
    ∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿
    ˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜
    ⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎
    ⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢
    ∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾
    ΩΩΩΩΩΩΩΩΩΩ

提交回复
热议问题