¿Es posible hacer una línea ondulada?

Hola, tenemos la respuesta a tu interrogante, has scroll y la encontrarás a continuación.

Solución:

Esta pregunta es bastante antigua, pero encontré una manera de hacerlo sin Javascript, CSS repetitivo o imágenes.

Con el tamaño de fondo, puede repetir un patrón, que se puede crear con CSS puro usando degradado lineal o degradado radial.

Pongo un montón de ejemplos aquí: http://jsbin.com/hotugu/edit?html,css,output

La esencia básica es:

.holder 
  /* Clip edges, as some of the lines don't terminate nicely. */
  overflow: hidden;
  position: relative;
  width: 200px;
  height: 50px;


.ellipse 
  position: absolute;
  background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
  background-size: 36px 40px;
  width: 200px;
  height: 20px;


.ellipse2 
  top: 20px;
  left: 18px;
  background-position: 0px -20px;

Puede producir algunas líneas onduladas convincentes con algunas modificaciones:

.holder 
    position: relative;
    width: 200px;
    height: 50px;
    top: 25px;

.tinyLine 
    position: absolute;
    /* Cuts off the bottom half of the pattern */
    height: 20px;
    /* For better cross browser consistency, make it larger with width.  */
    width: 1000%;
    /* And then scale it back down with scale, recentering with translateX. */
    transform: translateX(-45%) scale(0.1);


.tinyLine1 
    background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);

.tinyLine2 
    background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);

.tinyLine 
    /* Must be after background definition. */
    background-size: 40px 40px;

El soporte del navegador está bien (http://caniuse.com/#feat=css-gradients), IE 10 probablemente funcionará, sin embargo, las cosas fallan a pequeña escala en diferentes navegadores. Si desea que funcione en escalas realmente pequeñas de manera consistente, es posible que desee hacer la línea en una escala mayor y luego reducirla con transform: scale(x);.

También debería ser muy rápido, los gradientes lineales se procesan en la GPU en cromo.

EDITAR: Dado el requisito de no imágenes/datos uri.

También puede juntar un montón de elementos de radio de borde, alternando con los bordes superior/inferior o izquierdo/derecho deshabilitados. He generalizado esto en una función que los agrega a un elemento.

Javascript, donde squigglecount es el número de “garabatos”. Puede generalizar eso a un ancho real si así lo desea.

http://jsfiddle.net/V7QEJ/1/

function makeLine(id, squiggleCount)

    var curve;
    var lineEl = $(id);

    for (var i = 0; i < squiggleCount ; i++)
    
        curve = document.createElement('div');
        curve.className = 'curve-1';
        lineEl.append(curve);

        curve = document.createElement('div');
        curve.className = 'curve-2';
        lineEl.append(curve);
    

CSS:

.curve-1,
.curve-2
    display: inline-block;

    border: solid 1px #f00;
    border-radius: 50px;

    height: 20px;
    width: 20px;


.curve-1
    border-bottom: none;
    border-left: none;
    border-right: none;

.curve-2
    border-top: none;
    border-left: none;
    border-right: none;

Antiguo (con imágenes):

Ya hay un montón de respuestas, pero aquí hay una manera fácil de hacer una línea ondulada vertical, similar a la respuesta de Lawson.

Básicamente, usas una imagen de fondo y un uri de datos de una línea ondulada para hacerlo. Probablemente no usaría esto para nada, pero es un ejercicio de pensamiento interesante. Hay un montón de generadores de URI de datos que puede usar en línea para cambiar sus propias imágenes.

http://jsfiddle.net/zadP7/

Stuff

More Stuff

.aux
    display: inline-block;
    vertical-align: top;

.line
    display: inline-block;

    height: 400px;
    width: 10px;

    background-image: url(...etc...) 

Solución CSS pura:

Podemos usar el carácter de onda sinusoidal '∿' y luego

Establezca un valor negativo para letter-spacing

VIOLÍN

Solo por diversión, podemos usar diferentes personajes para obtener otros garabatos:

VIOLÍN #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;

∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿
˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜
⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎
⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢
∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾
ΩΩΩΩΩΩΩΩΩΩ

Si para ti ha sido de provecho este artículo, sería de mucha ayuda si lo compartieras con otros seniors de este modo nos ayudas a extender nuestra información.

---

---

Utiliza Nuestro Buscador