Est-il possible de faire une ligne sinueuse?

Si je voulais faire une ligne horizontale, je ferais ceci:

<style>
#line{
    width:100px;
    height:1px;
    background-color:#000;
}
</style>
<body>
<div id="line"></div>

Si je voulais faire une ligne verticale, je ferais ceci:

#line{
    width:1px;
    height:100px;
    background-color:#000;
}
</style>
<body>
<div id="line"></div>

Une ligne courbe est plus compliqué, mais possible à l'aide de border-radius et habillage de l'élément:

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

Mais je ne peux même pas imaginer comment je pourrais générer des lignes ondulées! Est-ce même à distance possible en utilisant uniquement css et javascript, car il ne semble pas qu'il sera nécessaire pour pouvoir plus facilement les générer).

remarque:

Comme prévu, compte tenu de vos réponses il n'y a aucun moyen de le faire dans la semelle css...javascript et jquery sont 100% correct pour votre réponse...PAS d'IMAGES PEUT ÊTRE UTILISÉ

un couple de .curve éléments collés ensemble?
Comment sur l'utilisation de CSS3 border images?
Vous pourriez être en mesure de faire quelque chose comme ceci à l'aide de plusieurs div est situé à côté les uns des autres, avec une très forte border-radius. Vous pouvez également avoir à cacher le haut/ bas moitiés des éléments selon qu'ils étaient bizarres ou même que vous pouvez le faire avec les CSS.
Pourquoi pas d'images? Même pas le SVG?
parce que l'application que je suis en utilisant pour ce sera à l'utilisateur de créer le squiggle

OriginalL'auteur Ryan Saxe | 2013-06-24

20

Cette question est assez vieux, mais j'ai trouvé un moyen de le faire sans Javascript, répétitif CSS ou les images.

Comme l'arrière-plan se répéter, vous pouvez utiliser le dégradé linéaire ou radial-gradient de faire plusieurs lignes.

Quelques exemples: http://jsbin.com/hotugu/3/edit?html,css,sortie

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;
}
```
La prise en charge du navigateur est correct (http://caniuse.com/#feat=css-gradients), c'est à dire 10 fonctionnera probablement, toutefois, les choses se dégrader à petites échelles dans les différents navigateurs. Si vous souhaitez travailler sur de très petites échelles constante, vous pouvez faire de la ligne sur une plus grande échelle, puis à l'échelle vers le bas ("transform: scale(x);").

Il devrait également être très rapide, linéaire-les gradients sont rendus sur le GPU en chrome, de sorte qu'il devrait être presque aussi rapide que possible.

Ce doit être la accepté de répondre.
C'est ingénieux! J'avais besoin d'un moyen de simuler text-decoration: underline wavy red; de la croix-navigateur, et a réussi à s'adapter à cette réponse et l'utilisation :before et :after pseudo-éléments afin d'obtenir un substitut viable. Merci!
Utilisez simplement la décoration:ondulé maintenant => developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

OriginalL'auteur yeerk
9

EDIT: compte tenu de l'exigence de n images/data uri.

Vous pouvez également fourrer tout un tas de border-radius éléments ensemble, en alternance avec le haut/bas ou gauche/droite bords désactivé. J'ai généralisé cette dans une fonction qui ajoute un élément.

Javascript, où squigglecount est le nombre de "gribouillis". Vous pourriez être généralisé à une largeur réelle si vous le souhaité.

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;
}
```
Ancienne (avec des images):

Il y a déjà un tas de réponses, mais voici une façon simple de faire une verticale de la ligne sinueuse, semblable à de Lawson réponse.

Fondamentalement, vous utilisez background-image et un data-uri d'une ligne sinueuse de le faire. Je n'aurais probablement pas l'utiliser pour quelque chose, mais c'est intéressant, la pensée de l'exercice. Il y a un tas de données uri générateurs que vous pouvez utiliser en ligne pour changer vos propres images.

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...) 
}
```
ne pouvez pas utiliser les images...
J'ai ajouté une solution de rechange n'utilisez pas d'images, si c'est de l'aide supplémentaire pour vous.
La réponse est le meilleur encore, bien que ne peut fonctionner de façon répétitive, il donne beaucoup de place! Je vais l'accepter puisque compliqué, non de répéter tilde peut clairement être fait avec une image après avoir vu ces réponses
Voici mon montage pour le mentionné ci-dessus de violon: jsfiddle.net/V7QEJ/188

OriginalL'auteur bfuoco
2

Si vous souhaitez que le soulignement de texte à une ligne sinueuse, vous pouvez utiliser le code css suivant:
```
  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

OriginalL'auteur peq

si vous n'êtes pas à la recherche de quelque chose de vraiment génial, mais juste pour le plaisir, jouer avec plusieurs box-shadow:
http://codepen.io/gcyrillus/pen/mfGdp ou 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%;
}

OriginalL'auteur G-Cyr

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

& #65103 ; (ondulé bas de ligne)

J'espère que ce n'est pas trop hors sujet - ici est de savoir comment utiliser ces lignes ondulées pour souligner du texte (qui devrait être une commune de cas d'utilisation.)

méthode 1 (arraché de Wulf répondre à un une question relative à la)

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

(pas vraiment une ligne sinueuse, mais une collection de points, mais semble OK et est magnifiquement simple.)

méthode 2 (inspiré par DanieldD)

à l'aide de & #65103 ; (ondulé bas de ligne) de caractères unicode et absolue /relative positionnement de mettre ce personnage en dessous du texte. Voici une violon

ici c'est "la viande" du code pour le positionnement

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

OriginalL'auteur mathheadinclouds

Remercier @yeerk pour une solution merveilleuse!

Mais je voudrais suggérer quelques améliorations à son premier variantes à ceux des vagues de ce qui semble être plus triangulaire. Je suggère d'utiliser :before et :after pseudo-éléments au lieu de codé en dur fermé divs.

Il peut ressembler à ceci (html):

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

— où triangly-line est une cible décorées élément (et non pas "agité", mais "triangled").

Styles (en utilisant MOINS de notation) ressemblera à ceci:

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

Entraîné CSS (en utilisant les paramètres spécifiés ci-dessus):

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

OriginalL'auteur lilliputten

0

Avant il y avait HTML5 et Canvas, il n'y a JavaScript VectorGraphics. Vous pouvez l'essayer si vous voulez dessiner des Cercles, des Ellipses, etc. etc. en pur HTML.

OriginalL'auteur Yuriy Galanter

Au lieu d'utiliser de la frontière, à l'utilisation d'un arrière-plan en mosaïque de l'image.

Je ne pense pas qu'il y est une solution qui est loin sans l'aide d'un fichier graphique et qui fonctionne dans tous les navigateurs.

Si vous êtes courageux, vous pouvez essayer ceci:http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/

Il permet de dessiner sur le canevas en HTML5, mais il ne fonctionnerait pas sur les anciens navigateurs.

si vous pouvez ajouter beaucoup de html, vous pouvez utiliser ceci:
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;
}

Je vais regarder en html sur la toile...me semble que je peux lui donner un graphique, je préfère ne pas avoir à venir avec une équation, mais il pourrait être le seul moyen...et je ne peux pas utiliser une image
Le jsfiddle ne montre pas un tilde pour moi...
Eh bien, c'est plutôt dommage, mais de toute façon que le lien était pour une ancienne version... de toute façon, j'ai mis à jour le lien dans le post pour pointer vers la nouvelle version: jsfiddle.net/QsM4J

OriginalL'auteur Sebastian Meine

Voici une SASS vague générateur de ligne en fonction de la réponse de @yeerk. Si vous voulez triangles, utilisez le générateur ci-dessus par @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};
}
}

OriginalL'auteur Fabian von Ellerts

-1

Si vous êtes à l'aide de Javascript, cela peut être facilement réalisé en utilisant une onde sinusoïdale - c'est ainsi que les langages de programmation ont atteint contrôlable lignes ondulées pour des décennies! Vous devriez être capable de trouver beaucoup d'exemples, mais essentiellement, vous venez de faire une boucle avec une incrémentation de x valeur et d'appliquer la fonction sinus sin(). C'est cool pour faire des économiseurs d'écran dans les années 90 et les animer, etc.

OriginalL'auteur Sam

Vous devez vous connecter pour publier un commentaire.