Можно ли сделать волнистую линию?

Если бы я хотел сделать горизонтальную линию, я бы сделал это: 



<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, поскольку кажется, что это будет необходимо, чтобы иметь возможность более легко генерировать их).

Примечание:



Как и ожидалось, учитывая ваши ответы, нет никакого способа сделать это в единственном css...javascript и jquery на 100 процентов подходят для вашего ответа...НИКАКИЕ ИЗОБРАЖЕНИЯ НЕ МОГУТ БЫТЬ ИСПОЛЬЗОВАНЫ

1245   10  

10 ответов:

Этот вопрос довольно стар, но я нашел способ обойтись без Javascript, повторяющихся CSS или изображений.

Поскольку фон будет повторяться, вы можете использовать линейный градиент или радиальный градиент для создания повторяющихся линий.

Примеры: http://jsbin.com/hotugu/3/edit?html,УСБ,выход

образец

HTML: 

<div class="holder">
    <div class="ellipse"></div>
    <div class="ellipse ellipse2"></div>
</div>

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 ), то есть 10, вероятно, будет работать, однако вещи ломаются в небольших масштабах в разных браузерах. Если вы хотите, чтобы он работал на действительно малых масштабах последовательно, вы можете сделать линию в большем масштабе, а затем уменьшить ее ("transform: scale(x);").

Он также должен быть очень быстрым, линейные градиенты отображаются на графическом процессоре в chrome, поэтому он должен быть почти таким же быстрым, как это возможно.

20  
2016-11-26 02:50:31

EDIT: учитывая требование отсутствия uri изображений / данных.

Вы также можете втиснуть кучу элементов border-radius вместе, чередуя их с отключенными верхними/нижними или левыми/правыми краями. Я обобщил это в функцию, которая добавляет их к элементу.

Javascript, где squigglecount-это число "закорючек". Вы могли бы обобщить это до реальной ширины, если вы так желанный.

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...) 
}
9  
2013-06-25 01:08:04

Чистое решение CSS:

Мы можем использовать символ волны греха '∿', а затем

Установите отрицательное значение для letter-spacing

Скрипка

Введите описание изображения здесь

Просто для удовольствия мы можем использовать разные символы, чтобы получить другие закорючки:

Скрипка #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>
6  
2015-01-05 13:19:47

Если вы хотите, чтобы подчеркивание некоторого текста было волнистой линией, вы можете использовать следующий 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

2  
2015-11-01 19:26:39

Если вы ищете не что-то действительно аккуратное, а просто для удовольствия, играйте с несколькими тенями коробки: 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  
2013-06-25 01:18:50

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

& #65103 ; (волнистая низкая линия)

Я надеюсь, что это не слишком далеко от темы - вот как использовать эти волнистые линии, чтобы подчеркнуть некоторый текст (должен быть общий случай использования.)

Метод 1 (вырвано у Вульфа, отвечающего на связанный вопрос ) 

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

(на самом деле это не волнистая линия, а набор точек, но выглядит нормально и красиво просто.)

Метод 2 (Вдохновленный DanieldD)

Используя & #65103; (волнистый low line) символ Юникода и абсолютное / относительное расположение, чтобы поместить этот символ под некоторым текстом. Вот скрипка

Вот "мясо" кода для позиционирования 

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  
2017-05-23 15:18:33

Спасибо @yeerk за такое замечательное решение!

Но я хотел бы предложить некоторые улучшения к его первым вариантам-к тем из волн, которые кажутся более треугольными. Я бы предложил использовать :before и :after псевдо-элементы вместо жестко закодированных вложенных дивов.

Это может выглядеть так (html): 

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

- где triangly-line - целевой декорированный элемент (не "волнистый", а "треугольник").

Соответствующие стили (с использованием меньшей нотации) будут выглядеть следующим образом: это: 

@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;
}
1  
2017-05-23 13:30:10

До появления HTML5 и Canvas существовалаJavaScript Vectorg-графика . Вы можете попробовать, если хотите нарисовать круги, эллипсы и т. д. и т.д. в чистом HTML.

0  
2013-06-25 00:44:44

Вместо границы используйте фоновое изображение, выложенное плиткой.

Я не думаю, что есть решение, которое можно получить, не используя графический файл, и которое также работает во всех браузерах.

Если вы храбры, вы можете попробовать это: 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;
}
0  
2013-06-26 00:37:07

Если вы используете Javascript, это может быть легко достигнуто с помощью синусоидальной волны - именно так языки программирования десятилетиями достигали управляемых волнистых линий! Вы должны быть в состоянии найти там много примеров, но по существу вы просто делаете цикл с увеличивающимся значением x и применяете функцию синуса sin (). Это было круто для создания заставок в 90-х годах и анимации их и т. д.

-1  
2013-06-25 00:46:05

Comments

    Ничего не найдено.
Click here to cancel reply.