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

问题描述 投票：14回答：11

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

<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，因为它似乎有必要能够更容易地生成它们）。

note:

正如预期的那样，给出你的答案，没有办法在单一的CSS中做到这一点... javascript和jquery 100％可以为你的答案...没有图像可以使用

javascript jquery html css
11个回答
21
投票

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

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

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

.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）;”）。

它也应该非常快，线性渐变在GPU上以chrome呈现，因此它应该几乎尽可能快。

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};
  }
}
-1
投票

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

9
投票

编辑：鉴于没有图像/数据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...) 
}
6
投票

纯CSS解决方案：

我们可以使用sin wave character'∿'字符然后

为letter-spacing设置负值

FIDDLE

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

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

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%;
}
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启发）

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

这里是定位代码的“肉”

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);
}
1
投票

感谢@yeerk这样一个很棒的解决方案！

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

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

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

- 其中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;
}
0
投票

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

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;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.