javascript – 有可能使一个波浪线吗？

如果我想做一个水平线,我会这样做：

<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”的数量.如果您愿意,您可以将其推广到实际的宽度.

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;
}

老(带图像)：

已经有一堆答案,但这是一个简单的方法来做一个垂直的波浪线,类似于劳森的答案.

基本上,您使用背景图像和一个波浪线的数据uri来做到这一点.我可能不会使用这个东西,但这是一个有趣的思考练习.有一堆数据uri生成器,您可以在线使用来更改自己的图像.

http://jsfiddle.net/zadP7/

<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...) 
}

javascript – 有可能使一个波浪线吗？

解决方法

相关文章