CSS3 Линия через / между элементами

Question

CSS3 Линия через / между элементами

0

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

Также я хочу, чтобы они реагировали на изменения размера экрана, а не только на абсолютные изображения. Как вы думаете, что это может быть достигнуто?

Примечание. Поддержка IE не требуется.

Islam Wazery 01 янв. 2014, в 07:57

Источник

0

Вы хотите, чтобы диагональная линия не была изображением? IE 8,9, вероятно, не будет поддерживать это
Michael Falciglia 01 янв. 2014, в 06:34
1

Я вообще не хочу поддерживать IE: D
Wazery 01 янв. 2014, в 06:36
1

LOL Я чувствую, вы .... вы знаете, около 35% браузеров IE :-)
Michael Falciglia 01 янв. 2014, в 06:51
0

Да, но я просто хочу научиться :) не для реального продукта.
Wazery 01 янв. 2014, в 06:56
0

использовать фон img может быть легко и работает быстро / быстро?
Godinall 01 янв. 2014, в 07:34

Показать ещё 3 комментария

Теги:

html

sass

css

html5

css3

2 ответа

Ещё вопросы

Вы хотите, чтобы диагональная линия не была изображением? IE 8,9, вероятно, не будет поддерживать это
Я вообще не хочу поддерживать IE: D
LOL Я чувствую, вы .... вы знаете, около 35% браузеров IE :-)
Да, но я просто хочу научиться :) не для реального продукта.
использовать фон img может быть легко и работает быстро / быстро?

gfrobenius · Answer 1 · 2014-01-01T04-49-00.000Z

Вот краткий пример того, как вы можете сделать некоторые диагональные линии: http://jsfiddle.net/wZD9K/

#line1{
        position:absolute;
        z-index:100;
        font-weight:bold;
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg); /* IE 9 */
        -webkit-transform: rotate(-45deg); /* Safari and Chrome */
        -o-transform: rotate(-45deg); /* Opera */
        -moz-transform: rotate(-45deg); /* Firefox */
        top:50px;
        left:25px;
        padding:5px 10px 5px 10px;
        opacity:0.2;
        filter:alpha(opacity=20); /* For IE8 and earlier */
    }
#block1{
    border:5px solid red;
    z-index:200;
    width:200px;
    margin-top:50px;
}

--UPDATE-- Но если вам не нужно поддерживать IE, то перейдите прямо к использованию холста HTML5: http://jsfiddle.net/BHXru/

  // get the canvas element using the DOM
  var canvas = document.getElementById('mycanvas');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){

    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    // Filled triangle
    ctx.beginPath();
    ctx.moveTo(25,25);
    ctx.lineTo(105,25);
    ctx.lineTo(25,105);
    ctx.fill();

    // Stroked triangle
    ctx.beginPath();
    ctx.moveTo(125,125);
    ctx.lineTo(125,45);
    ctx.lineTo(45,125);
    ctx.closePath();
    ctx.stroke();

  } else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }

Дополнительные примеры рисования линий внизу этой страницы: tutorialspoint.com/html5/canvas_drawing_lines.htm

aandis · Answer 2 · 2014-01-01T05-46-00.000Z

Также я хочу, чтобы они реагировали на изменения размера экрана, а не только на абсолютные изображения. Как вы думаете, что это может быть достигнуто?

img
{
  max-width:100%;
}

должен сделать трюк.