是否有可能形成一条波浪线？

时间：2013-06-24 21:34:04

标签： javascript jquery html css

如果我想制作一条水平线，我会这样做：

<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％可以回答你的答案... 没有图像可以使用

12 个答案:

答案 0 :(得分：21)

这个问题相当陈旧，但我找到了一种没有Javascript，重复CSS或图像的方法。

当背景重复时，您可以使用线性渐变或径向渐变来制作重复的线条。

一些例子：http://jsbin.com/hotugu/3/edit?html,css,output

example 

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

浏览器支持是可以的（http://caniuse.com/#feat=css-gradients），IE 10可能会起作用，但是在不同浏览器中小规模的事情会发生故障。如果您希望它能够在非常小的尺度上工作，您可能希望以更大的比例制作线条，然后将其缩小（“transform：scale（x）;”）。

它也应该非常快，线性渐变在Chrome上以GPU渲染，所以它应该尽可能快。

答案 1 :(得分：9)

编辑：鉴于没有图片/数据uri的要求。

您还可以将一堆边界半径元素填充在一起，并禁用顶部/底部或左/右边缘。我已将其概括为一个将它们附加到元素的函数。

Javascript，其中squigglecount是＆＃34; squiggles＆＃34;的数量。如果您愿意，可以将其推广到实际宽度。

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

答案 2 :(得分：6)

纯CSS解决方案：

我们可以使用sin wave character＆＃39;∿＆＃39;字符，然后

为letter-spacing

设置负值

<强> FIDDLE

enter image description here

为了好玩，我们可以使用不同的角色来获得其他曲线：

<强> FIDDLE #2

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<div class="acd">∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿</div>
<div class="tilde">˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜</div>
<div class="curlyv">⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎</div>
<div class="frown">⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢</div>
<div class="ac">∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾</div>
<div class="ohm">ΩΩΩΩΩΩΩΩΩΩ</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：3)

如果您希望某些文字的下划线是一条波浪线，您可以使用以下css：

  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;

来源：https://developer.mozilla.org/en/docs/Web/CSS/text-decoration-line#example

答案 4 :(得分：1)

如果你不是在寻找真正整洁的东西，但只是为了它的乐趣，玩多个盒子阴影： http://codepen.io/gcyrillus/pen/mfGdp或http://codepen.io/gcyrillus/pen/xhqFu 

.curve{
  margin:3em 0;
  width:100px;
  height:150px;
  border-radius:50%;
  box-shadow:
    0px 2px 1px -1px,
    400px 0px 0px 0px white,
    400px 2px 1px -1px ,
    300px 0px 0px 0px white,
    300px -2px 1px -1px,
    600px 0px 0px 0px white,
    600px 2px 1px -1px ,
    500px 0px 0px 0px white,
    500px -2px 1px -1px,
    800px 0px 0px 0px white,
    800px 2px 1px -1px ,
    700px 0px 0px 0px white,
    700px -2px 1px -1px,
    1000px 0px 0px 0px white,
    1000px 2px 1px -1px ,
    900px 0px 0px 0px white,
    900px -2px 1px -1px,
    1200px 0px 0px 0px white,
    1200px 2px 1px -1px ,
    1100px 0px 0px 0px white,
    1100px -2px 1px -1px,
    1400px 0px 0px 0px white,
    1400px 2px 1px -1px ,
    1300px 0px 0px 0px white,
    1300px -2px 1px -1px,
    1600px 0px 0px 0px white,
    1600px 2px 1px -1px ,
    1500px 0px 0px 0px white,
    1500px -2px 1px -1px;
  position:relative;
}
.curve:before,.curve:after {
  content:'';
  position:absolute;
  height:100%;
  width:100%;
  border-radius:100%;
  box-shadow:inherit;
}
.curve:before {
  left:100%;
  transform:rotate(180deg);
 }
.curve:after {
  left:200%;
}

答案 5 :(得分：1)

﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏

＆安培; ＃65103; （波浪低线）

我希望这不是太多主题 - 这里是如何使用那些波浪线来强调一些文本（应该是一个常见的用例。）

方法1（从Wulf回答related question）

<span style="border-bottom: 1px dotted #ff0000;padding:1px">
    <span style="border-bottom: 1px dotted #ff0000;">
        foobar
    </span>
</span>

（不是真正的波浪线，而是一系列圆点，但看起来还不错，非常简单。）

方法2（受DanieldD启发）

使用＆amp; ＃65103; （波浪形低行）unicode字符和绝对/相对定位，以将该字符放在某些文本下面。这是fiddle

这是＆＃34;肉＆＃34;定位代码

function performUnderWavyLowLineazation(contentElt){
    var wavyFontSize = 40;
    var width = contentElt.width();
    contentElt.addClass("underWavyLowLined");
    replaceSpaceByNonBreakingSpace(contentElt);
    var sp = "<span/>";
    var wrapper = contentElt.wrap(sp).parent();
    wrapper.addClass("wavyParent");
    var underlining = jQuery(sp, {"class" : "wavyLowLine"}).prependTo(wrapper);
    var ghost;
    var invisibleGhostThatTakesUpTheSpaceThatUnderWavyLowLinedElementShouldTakeButDoesntDueToBeingAbsolute
        = ghost = jQuery(sp, {"class": "invisibleUnderWavyLowLined"}).appendTo(wrapper);
    ghost.html(contentElt.html());
    ghost.find("*").removeAttr("id");
    replaceSpaceByNonBreakingSpace(ghost);
    var numWavyChars = Math.floor(0.1 + width/wavyFontSize);
    innerUnderLine = jQuery(sp, {"class": "innerWaveLine"}).appendTo(underlining);
    innerUnderLine.html("&#65103;".repeat(numWavyChars));
    var lineLength = wavyFontSize * numWavyChars;
    var defect = width - lineLength;
    innerUnderLine.css("left", defect/2);
    var wavyGroup = jQuery(sp, {"class" : "wavyGroup"}).prependTo(wrapper);
    underlining.appendTo(wavyGroup);
    contentElt.appendTo(wavyGroup);
}

答案 6 :(得分：1)

感谢@yeerk这么棒的解决方案！

但我想建议对他的第一个变体进行一些改进 - 对那些看起来更像三角形的波浪进行改进。我建议使用:before和:after伪元素而不是硬编码的封闭div。

它可能看起来像这样（html）：

<div class="triangly-line"></div>

- 其中triangly-line是目标装饰元素（不是＆＃34;挥手＆＃34;但＆＃34;三角＆＃34;）。

相应的样式（使用LESS表示法）将如下所示：

@line-width: 300px;
@triangled-size: 6px;
@triangly-color: red;
@double-triangled-size: (@triangled-size * 2 - 1px);
.linear-gradient (@gradient) {
    background: -webkit-linear-gradient(@gradient);
    background: -o-linear-gradient(@gradient);
    background: linear-gradient(@gradient);
}
.triangly-gradient (@sign, @color) {
    .linear-gradient(~"@{sign}45deg, transparent, transparent 49%, @{color} 49%, transparent 51%");
}
.triangly-line {
    overflow: hidden;
    position: relative;
    height: @triangled-size;
    &:before {
        .triangly-gradient("", @triangly-color);
    }
    &:after {
        .triangly-gradient("-", @triangly-color);
    }
    &:before,
    &:after {
        content: "";
        display: block;
        position: absolute;
        width: @line-width;
        height: @triangled-size;
        background-size: @double-triangled-size @double-triangled-size !important;
    }
}

结果CSS（使用上面指定的参数）：

.triangly-line {
    overflow: hidden;
    position: relative;
    height: 6px;
}
.triangly-line:before {
    background: -webkit-linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
    background: -o-linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
    background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.triangly-line:after {
    background: -webkit-linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
    background: -o-linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
    background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.triangly-line:before,
.triangly-line:after {
    content: "";
    display: block;
    position: absolute;
    width: 300px;
    height: 6px;
    background-size: 11px 11px !important;
}

答案 7 :(得分：0)

使用平铺的背景图像，而不是使用边框。

我不认为有一个解决方案可以在不使用图形文件的情况下消失，并且在所有浏览器中都可以使用。

如果你很勇敢，你可以试试这个：http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/

它允许在HTML5中绘制画布，但它不适用于旧浏览器。

如果你可以添加很多html，你可以使用这个： http://jsfiddle.net/QsM4J/

HTML：

<body>
    <p>
    before
    </p>
    <div id="sqig">
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
        <div class="topsqig"><div></div></div>
        <div class="bottomsqig"><div></div></div>
    </div>
    <p>
    after
    </p>
</body>

CSS：

#sqig{
    position:relative;
    width:400px;
    height:6px;
}
#sqig div{
    position:relative;
    width:6px;
    height:6px;
    display: inline-block;
    margin:0 0 0 -4px;
    padding:0;    
}
#sqig .topsqig div{
    border-radius: 3px;
    top:1px;
    border-top: 1px solid #000;
}
#sqig .bottomsqig div{
    border-radius: 3px;
    top:-1px;
    border-bottom: 1px solid #000;
}

答案 8 :(得分：0)

在有HTML5和Canvas之前，有JavaScript VectorGraphics。如果你想在纯HTML中绘制圆圈，椭圆等等，你可能想尝试一下。

答案 9 :(得分：0)

这是一个基于@yeerk的答案的SASS波浪线发生器。如果您想使用三角形，请使用@lilliputten上方的生成器。

$waveHeight: 40px;
$waveLength: 70px;
$waveRadius: 13px; // adjust depending on length
$waveThickness: 8px;

@mixin waveSide() {
  position: absolute;
  background: radial-gradient(ellipse, transparent, transparent $waveRadius, black $waveRadius, black #{$waveRadius + $waveThickness}, transparent #{$waveRadius + $waveThickness});
  background-size: #{$waveLength} #{$waveHeight * 2};
  height: $waveHeight;
}

.wavy {
  width: 400px; // give the wave element a length here

  @include waveSide;

  &::before {
    $waveOffset: $waveLength / 2;
    @include waveSide;

    content: '';
    width: calc(100% - #{$waveOffset});
    top: $waveHeight;
    left: $waveOffset;
    background-position: 0px -#{$waveHeight};
  }
}

答案 10 :(得分：0)

我找到了一种更好的方法来在 CSS 中实现扭曲的波浪线，而无需将高度减半或应用在浏览器中不起作用的技巧。

result

我试过 @yeerk's solution 但它只在 Chrome 中运行良好。这些线条在 Safari 和 Firefox 上有伪影。

火狐

firefox artifacts

Safari

safari artifact

此解决方案是 @liliputen's solution 的变体，但它改进了灵活性。

您可以通过 background-size 属性轻松更改线条的大小。

.squiggly {
    position: relative;
    height: 10px;
    width: 100%;
}

.squiggly::after,
.squiggly::before {
    height: inherit;
    width: inherit;
    background-size: 12px 100%; /* Change this to adjust the size of the squiggly line. */
    content: "";
    position: absolute;
}

.squiggly::before {
    top: -2px;
    background-image: linear-gradient(45deg, red 35%, transparent 0),
        linear-gradient(-45deg, red 35%, transparent 0);
}

.squiggly::after {
    top: 0px;
    background-image: linear-gradient(45deg, white 35%, transparent 0),
        linear-gradient(-45deg, white 35%, transparent 0);
}
<div class="squiggly"></div>

您也可以在 JS Fiddle 上找到它。

答案 11 :(得分：-1)

如果您正在使用Javascript，这可以使用正弦波轻松实现 - 这就是编程语言几十年来实现可控制的波浪线的方式！你应该能够在那里找到大量的例子，但基本上你只是用递增的x值循环并应用正弦函数sin（）。这曾经很酷，可以在90年代制作屏幕保护程序，并为它们制作动画等等。

相关问题
最新问题