仅限CSS

您可以使用CSS3 repeating-linear-gradient

＆＃13;

    .wavy {
        background: repeating-linear-gradient(-45deg, transparent, transparent 9px, #CCC 2px, #CCC 12px),
    			    repeating-linear-gradient(45deg, transparent, transparent 9px, #CCC 2px, #CCC 12px);
        height: 8px;
        width: 98px;
    }

＆＃13;

<p class="wavy"></p>

＆＃13;

上述代码不包括自all major browsers seem to accept it

以来的供应商前缀

静态Javascript

＆＃13;

   function appendWaves(el){
        var littleGuy = document.createElement('div');
        littleGuy.id="littleGuy";
        littleGuy.setAttribute('style', 'color:#CCC; font-size: 0.8em;');
        littleGuy.innerHTML = '\\/\\/\\/\\/\\/\\/\\';
        el.appendChild(littleGuy);
    }
    
    //example usage
    window.onload = function(){appendWaves(document.body)};

＆＃13;

动画CSS

＆＃13;

   .wavy {
        -webkit-animation: 0.5s infinite bgPos linear;
        animation: 0.5s infinite bgPos linear;
        background: repeating-linear-gradient(-45deg, transparent, transparent 9px, #ccc 2px, #ccc 12px) repeat scroll 0 0%, repeating-linear-gradient(45deg, transparent, transparent 9px, #ccc 2px, #ccc 12px) repeat scroll 0 0 rgba(0, 0, 0, 0);
        height: 8px;
        width: 98px;
        background-size: 114px;
    }
    
    @-webkit-keyframes bgPos {
        0% {
            background-position: 0, 0;
        }
    
        100% {
            background-position: 100% 0, 100% 0;
        };
    }
    
    @keyframes bgPos {
        0% {
            background-position: 0;
        }
    
        100% {
            background-position: 100% 0;
        };
    }

＆＃13;

<p class="wavy"></p>

＆＃13;

动画Javascript

＆＃13;

    var waves = '\\/\\/\\/\\/\\/\\/\\';
    function wavy(){
        waves = waves.replace(/\\/g, "•");
        waves = waves.replace(/\//g, "∆");
        waves = waves.replace(/•/g, "/");
        waves = waves.replace(/∆/g, "\\");
        document.getElementById('littleGuy').innerHTML = waves;
        setTimeout(function(){requestAnimationFrame(wavy)}, 150);
    }
    
    function appendWaves(el){
        var littleGuy = document.createElement('div');
        littleGuy.id="littleGuy";
        littleGuy.setAttribute('style', 'color:#CCC; font-size: 0.8em;');
        el.appendChild(littleGuy);
        requestAnimationFrame(wavy);
    }
    window.onload = function(){appendWaves(document.body)};

＆＃13;

Answer 2

您可以使用字体中的\和/个字符来执行此操作，以使其按您希望的方式显示。使用Times New Roman，字符串\/\/\/\/\/看起来像图像中的锯齿形曲线它应该适用于几乎任何浏览器，包括禁用JavaScript的浏览器，没有SVG支持的过时浏览器，甚至是Lynx之类的命令行浏览器（它甚至无法显示图像）。

如果这不是您想要的，您可以随时使用JavaScript绘制HTML5画布，或使用SVG（如@sawa所指出的那样）。

Answer 3

你可以使用这样的东西：

    <html>
<head>
<script type="text/javascript">
function drawShape(){
  var canvas = document.getElementById('mycanvas');

  if (canvas.getContext){

    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(0,10);
    ctx.lineTo(10,0);
    ctx.moveTo(10,0);
    ctx.lineTo(20,10);
    ctx.moveTo(20,10);
    ctx.lineTo(30,0);
    ctx.moveTo(30,0);
    ctx.lineTo(40,10);
    ctx.moveTo(40,10);
    ctx.lineTo(50,0);
    ctx.moveTo(50,0);
    ctx.lineTo(60,10);

    ctx.stroke();

  } 
}
</script>
</head>
<body onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

小提琴：http://jsfiddle.net/MCZG7/

Answer 4

简单有效，试一试！

使用base64网址：

div {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANAAAAA8BAMAAADlDCm+AAAAElBMVEX////Jycna2trv7+/k5OTl5eVsfzX+AAAAUElEQVRYw+3HsQnAMAxE0RMkvXbwBp7AI2T/aWIC6a68QIr/jo+QAAAAgG+0VC6lDWm6lFZSu5R2rGfX3r7nen/Fddny5rDlVdsAAAAA/MoNzbkI9oz70dAAAAAASUVORK5CYII=');
}

您可以在此处压缩您的png：https://tinypng.com/
将其转移到base64代码：http://www.base64-image.de/

Answer 5

您甚至不需要CSS或JavaScript。在HTML代码中编写SVG对象。如果要使用CSS，可以将SVG设计移动到CSS。

Answer 6

以下是两个选项：

演示：http://jsfiddle.net/YBPeL/1/

注意：仅在Mac上运行的Chrome中进行测试。在使用之前，在整个目标浏览器集中进行测试。如果需要，可以在第二个选项中更改字体。

选项＃1

<span class="curvy"></span><span class="curvy"></span><span class="curvy"></span><span class="curvy"></span><span class="curvy"></span><span class="curvy"></span><span class="curvy"></span> 

span.curvy {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-left: 1px solid #888;
    border-top: 1px solid #888;
    -webkit-transform: rotate(45deg);
    padding: 0;
    margin-right: 1px;
}

选项＃2

<span class="curvy2">^^^^^^^</span>

span.curvy2 {
    letter-spacing: -1px;
    font-size: 10px;
    color: #888;
    -webkit-transform-origin: top left;
    -webkit-transform: scale(1.6,1);
    display: inline-block;
    font-weight: lighter;
    font-family: 'Helvetica Neue', 'Segoe UI', Helvetica;
}

使用css或javascript制作曲线？

6 个答案:

仅限CSS

静态Javascript

动画CSS

动画Javascript