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

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

<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 процентов подходят для вашего ответа... НЕТ ИЗОБРАЖЕНИЙ МОГУТ БЫТЬ ИСПОЛЬЗОВАНО

Ответ 1

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

С помощью background-size вы можете повторить шаблон, который можно создать с помощью чистого CSS с использованием линейного или радиального градиента.

Я привел здесь несколько примеров: http://jsbin.com/hotugu/edit?html,css,output

example

Основная суть:

.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;
}
<div class="holder">
  <div class="ellipse"></div>
  <div class="ellipse ellipse2"></div>
</div>

Ответ 2

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

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

Javascript, где squigglecount - это число "squiggles". Вы могли бы обобщить это на фактическую ширину, если хотите.

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

Ответ 3

Чистое решение для CSS:

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

Задайте отрицательное значение для letter-spacing

FIDDLE

enter image description here

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

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>

Ответ 4

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

Ответ 5

если вы не ищете что-то действительно опрятное, но просто для удовольствия, играйте с несколькими тенями: 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%;
}

Ответ 6

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

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

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

метод 1 (вырванный из Wulf, отвечая на вопрос )

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

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

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

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

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

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

Ответ 7

Благодарим @yeerk за такое замечательное решение!

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

Это может выглядеть так (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;
}

Ответ 8

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

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

Если вы храбры, вы можете попробовать следующее: 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;
}

Ответ 9

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

Ответ 10

Вот генератор волновой линии SASS, основанный на ответе @yeerk. Если вы хотите треугольники, используйте генератор выше @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};
  }
}

Ответ 11

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