是否有可能形成一条波浪线？
如果我想做一条水平线，我会这样做：
#line{ width:100px; height:1px; background-color:#000; } 如果我想制作一条垂直线，我会这样做：
#line{ width:1px; height:100px; background-color:#000; }
曲线比较复杂，但可以使用border-radius并包装元素：
.curve{ width:100px; height:500px; border:1px #000 solid; border-radius:100%; } #wrapper{ overflow:hidden; width:40px; height:200px; }
但我甚至无法理解如何产生波浪线！ 这甚至是远程可能只使用css（和javascript，因为它似乎有必要能够更容易地生成它们）。
注意：
正如预期的那样，给出你的答案，没有办法在单一的CSS中做到这一点… javascript和jquery是100％的答案你的答案… 没有图像可以使用
这个问题相当陈旧，但我找到了一种没有Javascript，重复CSS或图像的方法。
由于背景将重复，您可以使用线性渐变或径向渐变来制作重复的线条。
一些例子： http ： //jsbin.com/hotugu/3/edit？html，css，output
HTML：
CSS：
.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; }
浏览器支持是可以的（ http://caniuse.com/#feat=css-gradients），IE 10可能会工作，但是在不同浏览器中小规模的事情会发生故障。 如果您希望它能够在非常小的尺度上工作，您可能希望以更大的比例制作线，然后将其缩小（“transform：scale（x）;”）。
它也应该非常快，线性渐变在chrome上以GPU渲染，所以它应该尽可能快。
编辑：鉴于没有图像/数据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生成器，您可以在线使用它们来更改自己的图像。
Stuff More Stuff .aux{ display: inline-block; vertical-align: top; } .line{ display: inline-block; height: 400px; width: 10px; background-image: url(...etc...) }
纯CSS解决方案：
我们可以使用sin wave字符 ‘∿’字符然后
为letter-spacing设置负值
小提琴
只是为了好玩，我们可以使用不同的角色来获得其他曲线：
FIDDLE＃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; }
∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿ ˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜ ⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎ ⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢ ∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾ ΩΩΩΩΩΩΩΩΩΩ
如果您希望某些文本的下划线是一条波浪线，您可以使用以下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
如果你不是在寻找真正整洁的东西，但只是为了它的乐趣，玩多个盒子阴影： 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%; }
﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏
＆＃65103; （波浪低线）
我希望这不是太多主题 – 这里是如何使用那些波浪线来强调一些文本（应该是一个常见的用例。）
方法1（从Wulf回答相关问题 ）
foobar
（不是真正的波浪线，而是一系列点，但看起来还不错，非常简单。）
方法2（受DanieldD启发）
使用＆＃65103; （波浪形低线）unicode字符和绝对/相对定位，以将该字符放在某些文本下面。 这是一个小提琴
这里是定位代码的“肉”
function performUnderWavyLowLineazation(contentElt){ var wavyFontSize = 40; var width = contentElt.width(); contentElt.addClass("underWavyLowLined"); replaceSpaceByNonBreakingSpace(contentElt); var sp = ""; 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("﹏".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); }
感谢@yeerk提供了这么棒的解决方案！
但我想建议对他的第一个变体进行一些改进 – 对那些似乎更像三角形的波浪进行改进。 我建议使用:before和:after伪元素而不是硬编码的封闭div。
它可能看起来像这样（html）：
– triangly-line是目标装饰元素（不是“挥动”而是“三角形”）。
相应的样式（使用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; }
在有HTML5和Canvas之前，有一些JavaScript VectorGraphics 。 如果你想在纯HTML中绘制圆圈，椭圆等等，你可能想尝试一下。
而不是使用边框，使用平铺的背景图像。
我不认为有一个解决方案可以在不使用图形文件的情况下消失，并且在所有浏览器中都可以使用。
如果你很勇敢，你可以试试这个： http ： //www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
它允许在HTML5中绘制canvas，但它不适用于旧版浏览器。
如果你可以添加很多HTML，你可以使用这个： http ： //jsfiddle.net/QsM4J/
HTML：
before
after
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; }
如果您使用Javascript，可以使用正弦波轻松实现 – 这就是编程语言几十年来实现可控制的波浪线的方式！ 你应该能够在那里找到大量的例子，但实质上你只是用递增的x值循环并应用正弦函数sin（）。 这曾经很酷，可以在90年代制作屏幕保护程序并为它们制作动画等。