Чи можна зробити чіпкую лінію?

Якщо я хотів зробити горизонтальну лінію, я б це зробив:

<body>
<div id="line"></div>

Якщо я хотів зробити вертикальну лінію, я б це зробив:

#line{
    width:1px;
    height:100px;
    background-color:#000;
}

<body>
<div id="line"></div>

Вигнутий рядок складніший, але можливо за допомогою border-radius та обертання елемента:

<body>
<div id="wrapper">
    <div class="curve"></div>
</div>
</body>

But I cannot even fathom how I could generate squiggly lines! Is this even remotely possible using only CSS (and JavaScript since it does seem that it will be necessary to be able to more easily generate them).

Примітка:

As expected, given your answers there is no way to do this in sole css...javascript and jQuery are 100 percent okay for your answer...NO IMAGES CAN BE USED

13
@david, тому що програма, яку я використовую для цього, повинна мати користувачеві створити шпигун
додано Автор Ryan Saxe, джерело
Просто зауважте, що зміни технології - поточна вибрана відповідь, ймовірно, більше недійсна. Для тих, хто спотикається на цьому, як я, див. MDN стиль оформлення тексту: хвилястий > developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-sty‌ le
додано Автор qodeninja, джерело
Можливо, ви зможете зробити так щось на зразок цього, використовуючи декілька варіантів div поряд з одним дуже високим радіусом кордону. Вам також доведеться сховати верхню/нижню половинки елементів залежно від того, були вони непарними або навіть які ви можете зробити з CSS.
додано Автор Dropped.on.Caprica, джерело
пара елементів .curve стиснули разом?
додано Автор Chad, джерело
Як щодо використання образів кордону CSS3 ?
додано Автор elclanrs, джерело
Чому немає зображень? Не SVG навіть?
додано Автор david, джерело

10 Відповіді

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

Коли фону буде повторитися, ви можете використовувати лінійно-градієнт або радіальний градієнт, щоб зробити повторювані лінії.

Some examples: http://jsbin.com/hotugu/3/edit?html,css,output

example

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 ) IE 10, ймовірно, буде працювати, однак речі розбиваються на невеликих масштабах в різних браузерах. Якщо ви хочете, щоб він працював на дійсно невеликих вагах, то, можливо, ви захочете зробити лінію більшого масштабу, а потім масштабувати її ("перетворити: масштаб (x)").

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

19
додано
Просто використовуйте прикраси: wavy now => developer.mozilla. org/en-us/docs/Web/CSS/text-decoration-sty & nbsp; le
додано Автор qodeninja, джерело
Це має бути прийнята відповідь.
додано Автор mathheadinclouds, джерело
Це геніально! Мені потрібен спосіб симулювати текстове оформлення : підкреслення хвилястого червоного; крос-браузера і вдалося адаптувати цю відповідь і використовувати : before і : after псевдоелементи, щоб отримати дієву замісну. Дякую!
додано Автор Michael Bromley, джерело

EDIT: Given the requirement of no images/data uri.

Ви також можете перекочувати купу елементів кордону-радіуса разом, чергуючи з верхньою/нижньою або лівою/правою краї вимкнено. Я узагальнив це в функції, яка додає їх до елемента.

Javascript, де squigglecount - це число "squiggle". Ви могли б узагальнити це на фактичну ширину, якщо ви цього бажаєте.

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;
}

Старий (із зображеннями):

Там вже є безліч відповідей, але ось легкий спосіб зробити вертикальну червону лінію, подібну до відповіді Лоусона.

У принципі, ви використовуєте фонове зображення та дані þi косою лінії, щоб зробити це. Я, напевно, не буду використовувати це для чогось, але це цікава практика. Є величезна кількість даних 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
додано
не можу використовувати зображення ...
додано Автор Ryan Saxe, джерело
Цей відповідь є найкращим ще, хоча може працювати тільки повторюваним чином, він дає багато місця! Я прийму це, тому що після перегляду цих відповідей ясно, що складне, неповторне скрюкування може бути зроблено з зображенням
додано Автор Ryan Saxe, джерело
Я додав альтернативний варіант, який не використовує зображення, якщо вам буде потрібна додаткова допомога.
додано Автор bfuoco, джерело
Ось моя редакція до вищезгаданої скрипки: jsfiddle.net/V7QEJ/188
додано Автор Chris, джерело

Чистий CSS рішення:

Ми можемо використовувати символ хвилі хвилі хвилі <�∿ ', а потім

Set a negative value for letter-spacing

FIDDLE

enter image description here

Просто для веселощів ми можемо використовувати різні символи, щоб отримати інші шпигуни:

FIDDLE # 2

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

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>
</div> </div>
6
додано
Це дійсно акуратно, але я б не рекомендував використовувати його в реальному світі через різницю шрифтів.
додано Автор caesay, джерело
Які загальні шрифти можуть покладатися на те, щоб мати ці символи? Я стурбований тим, що відстань між літерами повинна бути різною залежно від того, який шрифт використовує браузер. У моїй системі, принаймні, Verdana використовується, як зазначено для тильди, але резервні шрифти використовуються для хвилястих низьких ліній і синусоїдальних символів.
додано Автор tremby, джерело
гріх хвиля ∿ курлів ⋎ ом Ω хмуриться (наступні роботи з інтервалом між буквами 0 - ﹏ (хвиляста низка лінія) ﹏ ค ล ต ค ค ค ต ค ค ต ค ต ค ต ค ต ห ค рійові мітки ﹏ ﹏ ﹏ ﹏ ﹏ ﹏ ﹏ ﹏ ﹏ ﹏ ﹏ ﹏ ﹏ ﹏ ﹏
додано Автор mathheadinclouds, джерело

Якщо ви хочете, щоб підкреслення деякого тексту було накресленою, ви можете використовувати наступний css:

  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;

Source: https://developer.mozilla.org/en/docs/Web/CSS/text-decoration-line#example

2
додано

якщо ви не шукаєте щось дійсно акуратне, але просто для задоволення від цього, грайте з декількома вікнами тіні: 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 ; (wavy low line)

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

метод 1 (вилучено з Wulf, відповідаючи на пов'язане питання )


    
        foobar
    

(не зовсім жорстока лінія, а збірка точок, але виглядає нормально і красиво просто.)

метод 2 (натхненний DanieldD)

using & #65103 ; (wavy low line) unicode character and absolute/relative positioning to put that character underneath some text. Here is a fiddle

ось "м'ясо" коду для позиціонування

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);
}
1
додано

Якщо ви використовуєте Javascript, це легко можна досягти за допомогою синусоїдальної хвилі - так, як мови програмування досягають десятиліть контрольованих лінійних ліній! Ви повинні мати змогу знайти безліч прикладів, але, по суті, ви просто виконуєте цикл із зростанням значення x і застосовуєте синусою функцію sin (). Це було прохолодно для того, щоб робити заставки в 90-х роках, анімішувати їх тощо.

1
додано

Дякуємо @yeerk за таке чудове рішення!

Але я хотів би запропонувати деякі поправки до своїх перших варіантів - тим хвилі, які здаються більш трикутними. Я б запропонував використовувати псевдоелементи : before і : after , а не жорстко кодовані замкнені divs.

Це може виглядати так (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;
}
1
додано

До появи HTML5 і Canvas з'явився JavaScript VectorGraphics . Ви можете спробувати зробити це, якщо хочете намалювати Кола, Еліпси та ін тощо в чистому HTML.

0
додано

Замість того, щоб використовувати межу, використовуйте фонове зображення з черепиці.

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

Якщо ви сміливі, можете спробувати це: http://www.html5canvastutorials.com/tudorials/html5-canvas-arcs/

Це дозволяє малювати на холсті в HTML5, але це не буде працювати на старих браузерах.

if you can add a lot of html you can use this: http://jsfiddle.net/QsM4J/

HTML:

<body>
    
before

<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>
after

</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
додано
Jsfiddle не показує, як би я брав ...
додано Автор Ryan Saxe, джерело
Я подивися на HTML-простір ... здається, я можу дати йому графік, який я б вважав за краще не вигадати рівняння, але це могло бути єдиним способом ... і я не можу використовувати зображення
додано Автор Ryan Saxe, джерело
Що ж, це досить невдало, але якось це посилання було для старої версії ... У будь-якому випадку я оновив посилання в положенні, щоб вказати на нову версію: jsfiddle.net/QsM4J
додано Автор Sebastian Meine, джерело
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram