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).
note:
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
Advertisement
Answer
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.