jQuery 是否可以制作一条波浪线？

Question

提问by Ryan Saxe

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-radiusand wrapping the element:

曲线更棘手，但可以使用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>

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

但我什至无法理解如何生成波浪线！这是否甚至可以仅使用 css（和 javascript，因为似乎有必要能够更轻松地生成它们）。

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

正如预期的那样，鉴于您的答案，没有办法在唯一的 css 中做到这一点……javascript 和 jquery 对您的回答 100% 没问题……不能使用任何图像

Answer 1

回答by yeerk

This question is fairly old, but I found a way to do with without Javascript, repetitive CSS or images.

这个问题相当古老，但我找到了一种无需 Javascript、重复 CSS 或图像的方法。

With background-size you can repeat a pattern, which can be created with pure CSS using linear-gradient or radial-gradient.

使用 background-size 你可以重复一个模式，可以使用线性渐变或径向渐变用纯 CSS 创建。

I put a bunch of examples here: http://jsbin.com/hotugu/edit?html,css,output

我在这里放了一堆例子：http: //jsbin.com/hotugu/edit?html,css,output

example

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

浏览器支持还可以（http://caniuse.com/#feat=css-gradients），IE10 可能会工作，但是在不同的浏览器中会出现小规模的问题。如果您希望它在非常小的范围内始终如一地工作，您可能希望在更大的范围内制作线条，然后使用transform: scale(x);.

It should also be very fast, linear-gradients are rendered on the GPU in chrome.

它也应该非常快，线性渐变在 GPU 上以 chrome 呈现。

Answer 2

回答by bfuoco

EDIT:Given the requirement of no images/data uri.

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

You can also cram a bunch of border-radius elements together, alternating with top/bottom or left/right edges disabled. I've generalized this into a function that appends them to an element.

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

Javascript, where squigglecount is the number of "squiggles". You could generalize that to an actual width if you so desired.

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:

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

Old (with images):

旧（带图片）：

There's already a bunch of answers, but here's an easy way to do a vertical squiggly line, similar to Lawson's answer.

已经有一堆答案，但这里有一个简单的方法来做一条垂直的波浪线，类似于劳森的答案。

Basically, you use background-image and a data-uri of a squiggly line to do it. I probably wouldn't use this for anything but it's an interesting thought exercise. There are a bunch of data uri generators that you can use online to change your own images.

基本上，您使用 background-image 和波浪线的 data-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...) 
}

Answer 3

回答by Danield

Pure CSS solution:

纯 CSS 解决方案：

We can use the sin wave character'?' character and then

我们可以使用正弦波字符'?' 性格然后

Set a negative value for letter-spacing

设置一个负值 letter-spacing

FIDDLE

小提琴

enter image description here

在此处输入图片说明

Just for fun we can use different characters to get other squiggles:

只是为了好玩，我们可以使用不同的字符来获得其他曲线：

FIDDLE #2

小提琴 #2

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

<div class="acd">???????????????</div>
<div class="tilde">????????????????????????</div>
<div class="curlyv">????????????????</div>
<div class="frown">?????????????????</div>
<div class="ac">?????????????????????</div>
<div class="ohm">??????????</div>

Answer 4

回答by peq

If you want the underline of some text to be a squiggly line, you can use the following css:

如果您希望某些文本的下划线成为波浪线，可以使用以下 css：

span {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

<span>Example text here</span>

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

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

Answer 5

回答by lilliputten

Thank @yeerkfor such a wonderful solution!

感谢@yeerk提供如此出色的解决方案！

But I would like to suggest some improvements to his first variants — to those of waves what seem to be more triangular. I would suggest to use :beforeand :afterpseudo-elements instead of hard-coded enclosed divs.

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

It may look like this (html):

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

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

— where triangly-lineis a target decorated element (not "waved" but "triangled").

— 哪里triangly-line是目标装饰元素（不是“波浪形”而是“三角形”）。

Corresponding styles (using LESS notation) will look like this:

相应的样式（使用 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;
    }
}

Resulted CSS (using specified above parameters):

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

Answer 6

回答by mathheadinclouds

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

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

& #65103 ; (wavy low line)

＆#65103 ; （波浪形低线）

I hope this is not too much off topic - here is how to use those squiggly lines to underline some text (should be a common use case.)

我希望这不会太离题——这里是如何使用那些波浪线来为一些文本加下划线（应该是一个常见的用例。）

method 1 (snatched from Wulf answering a related question)

方法一（摘自Wulf回答相关问题）

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

(not really a squiggly line but a collection of dots, but looks OK and is beautifully simple.)

（不是真正的波浪线，而是点的集合，但看起来不错，而且非常简单。）

method 2 (inspired by DanieldD)

方法 2（受 DanieldD 启发）

using & #65103 ; (wavy low line) unicode character and absolute / relative positioning to put that character underneath some text. Here is a fiddle

使用＆#65103; （波浪低线）unicode 字符和绝对/相对定位将该字符放在某些文本下方。这是一个小提琴

here is "the meat" of the code for the positioning

这是定位代码的“肉”

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

Answer 7

回答by G-Cyrillus

if you are not looking for something really neat, but just for the fun of it, play with multiple box-shadow: http://codepen.io/gcyrillus/pen/mfGdpor http://codepen.io/gcyrillus/pen/xhqFu

如果您不是在寻找真正整洁的东西，而只是为了好玩，请使用多个 box-shadow：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%;
}

Answer 8

回答by Sebastian Meine

Instead of using the border, use a tiled background image.

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

I do not think there is a solution that get's away without using a graphics file and that also works in all browsers.

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

If you are brave you can try this:http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/

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

It allows to draw on the canvas in HTML5, but it would not work on older browsers.

它允许在 HTML5 中的画布上绘图，但它不能在旧浏览器上工作。

if you can add a lot of html you can use this: http://jsfiddle.net/QsM4J/

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

HTML:

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:

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

Answer 9

回答by Yuriy Galanter

Before there was HTML5 and Canvas, there was JavaScript VectorGraphics. You may want to give it a try if you want to draw Circles, Ellipses etc. etc. in pure HTML.

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

Answer 10

回答by Fabian von Ellerts

Here is a SASS wave line generator based on the answer from @yeerk. If you want triangles, use the generator above by @lilliputten.

这是一个基于@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};
  }
}

jQuery 是否可以制作一条波浪线？

提问by Ryan Saxe

note:

笔记：

回答by yeerk

回答by bfuoco

回答by Danield

Pure CSS solution:

纯 CSS 解决方案：

回答by peq

回答by lilliputten

回答by mathheadinclouds

回答by G-Cyrillus

回答by Sebastian Meine

回答by Yuriy Galanter

回答by Fabian von Ellerts

相关推荐

最近更新

标签

jQuery 是否可以制作一条波浪线？

提问by Ryan Saxe

note:

笔记：

回答by yeerk

回答by bfuoco

回答by Danield

Pure CSS solution:

纯 CSS 解决方案：

回答by peq

回答by lilliputten

回答by mathheadinclouds

回答by G-Cyrillus

回答by Sebastian Meine

回答by Yuriy Galanter

回答by Fabian von Ellerts

相关推荐

jQuery CSS 媒体查询作为浏览器调整大小？

事件捕获 jQuery

如何使用 jquery ajax 调用谷歌地图地理编码服务

首先解除绑定点击然后绑定（jquery）

相关推荐

最近更新

标签