如果我想做一个水平线,我会这样做：
<style>
#line{
width:100px;
height:1px;
background-color:#000;
}
</style>
<body>
<div id="line"></div>
如果我想做一条垂直线,我会这样做：
#line{
width:1px;
height:100px;
background-color:#000;
}
</style>
<body>
<div id="line"></div>
曲线很棘手,但可能使用border-radius和包装元素：
<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>
但是我甚至不能理解我如何能产生波浪线！这甚至可以只使用CSS(和javascript,因为它似乎有必要能够更容易地生成它们)远程.
注意：
如预期的,鉴于您的答案,没有办法在唯一的CSS … javascript和jquery是100％可以为您的答案…没有图像可以使用
解决方法
编辑：给定没有图像/数据uri的要求.
您还可以将一束边框半径元素拼凑在一起,与顶部/底部或左/右边缘交替禁用.我把它概括成一个将它们附加到元素的函数.
Javascript,其中squigglecount是“squiggles”的数量.如果您愿意,您可以将其推广到实际的宽度.
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;
}
老(带图像)：
已经有一堆答案,但这是一个简单的方法来做一个垂直的波浪线,类似于劳森的答案.
基本上,您使用背景图像和一个波浪线的数据uri来做到这一点.我可能不会使用这个东西,但这是一个有趣的思考练习.有一堆数据uri生成器,您可以在线使用来更改自己的图像.
<div class="aux">Stuff</div>
<div class="line"></div>
<div class="aux">More Stuff</div>
.aux{
display: inline-block;
vertical-align: top;
}
.line{
display: inline-block;
height: 400px;
width: 10px;
background-image: url(...etc...)
}
