Menu
If I wanted to make a horizontal line, I would do this:
<style> #line{ width:100px; height:1px; background-color:#000; } </style> <body> <div id="line"></div> If I wanted to make a vertical line, I would do this:
#line{ width:1px; height:100px; background-color:#000; } </style> <body> <div id="line"></div> A curved line is trickier, but possible using border-radius and wrapping the element:
<style> .curve{ width:100px; height:500px; border:1px #000 solid; border-radius:100%; } #wrapper{ overflow:hidden; width:40px; height:200px; } </style> <body> <div id="wrapper"> <div class="curve"></div> </div> </body> But I cannot even fathom how I could generate squiggly lines! Is this even remotely possible using only css (and javascript since it does seem that it will be necessary to be able to more easily generate them).
As expected, given your answers there is no way to do this in sole css...javascript and jquery are 100 percent okay for your answer...NO IMAGES CAN BE USED
765
Using the Pen tool, drag to create the first smooth point of a curved segment. Reposition the Pen tool and drag to create a curve with a second smooth point; then press and hold Alt (Windows) or Option (Mac OS) and drag the direction line toward its opposing end to set the slope of the next curve.
Draw a straight line, then go to the effect menu, select distort & transform, then choose zig zag. Select smooth and make any other adjustments to create the number of ridges you need, etc.
In CSS, the symbol tilde(~) is know as Subsequent-sibling Combinator (also known as tilde or squiggle or twiddle or general-sibling selector). As the name suggests it is made of the “tilde” (U+007E, ~) character that separates two sequences of simple selectors.
This question is fairly old, but I found a way to do with without Javascript, repetitive CSS or images.
With background-size you can repeat a pattern, which can be created with pure CSS using linear-gradient or radial-gradient.
I put a bunch of examples here: http://jsbin.com/hotugu/edit?html,css,output
The basic gist is:
.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; }<div class="holder"> <div class="ellipse"></div> <div class="ellipse ellipse2"></div> </div>You can produce some convincing squiggly lines with some modifications:
.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; }<div class="holder"> <div class="tinyLine tinyLine1"></div> <div class="tinyLine tinyLine2"></div> </div>The browser support is okay (http://caniuse.com/#feat=css-gradients), IE 10 will probably work, however things break down at small scales in different browsers. If you want it to work on really small scales consistently you may want to make the line on a larger scale and then scale it down with transform: scale(x);.
It should also be very fast, linear-gradients are rendered on the GPU in chrome.
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
