CODEWITHSUNDEEP
htmlcsssass
Wazery
Wazery

Reputation: 15883

CSS3 Line through/between elements

I want to make some cross lines between my elements to make a roadmap like page. I will not explain a lot, photo is better than thousand words. I want lines through elements like this photo!

enter image description here

Also I want them to be responsive to screen size changes not just absolute images. How do you think this can be achieved?

Note: IE support is not required.

Upvotes: 0

Views: 75

Answers (2)

aandis
aandis

Reputation: 4212

Also I want them to be responsive to screen size changes not just absolute images. How do you think this can be achieved? 

img
{
  max-width:100%;
}

should do the trick.

Upvotes: 0

gfrobenius
gfrobenius

Reputation: 4067

Here is a quick example of how you can do some diagonal lines: 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-- But if you don't have to support IE then jump straight to using HTML5 canvas: 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.');
  }

Upvotes: 2

Related Questions