发表新帖
发表新帖

Is it possible to make a squiggly line?

前端 未结
关注
12 1943
无人及你
无人及你 2021-02-01 19:04

If I wanted to make a horizontal line, I would do this:
相关标签:
12条回答
  • 温柔的废话
    2021-02-01 19:29

    Here is a SASS wave line generator based on the answer from @yeerk. If you want triangles, use the generator above by @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};
  }
}
    0 讨论(0)
  • 没有蜡笔的小新
    2021-02-01 19:33

    Thank @yeerk for such a wonderful solution!

    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 :before and :after pseudo-elements instead of hard-coded enclosed divs.

    It may look like this (html):

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

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

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

    @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):

    .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 讨论(0)
  • 暖寄归人
    2021-02-01 19:33

    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/

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

    if you can add a lot of html you can use this: 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;
}
    0 讨论(0)
  • 你的背包
    2021-02-01 19:34

    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.

    0 讨论(0)
  • 爱一瞬间的悲伤
    2021-02-01 19:35

    If you want the underline of some text to be a squiggly line, you can use the following 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

    0 讨论(0)
  • 面向向阳花
    2021-02-01 19:37

    Pure CSS solution:

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

    Set a negative value for letter-spacing

    FIDDLE

    enter image description here

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

    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>

    0 讨论(0)
 看不清?
提交回复
热议问题