CODEWITHSUNDEEP
htmlcss
user3026874
user3026874

Reputation: 25

Background image for rows and columns of boxes

The title isn't very descriptive, but basically I want to create something like this with HTML and CSS: http://i.imgur.com/0fVLBrc.jpg

I can do the horizontal line by wrapping the first row of boxes in a div and setting the background image for that to the line, but I'm not sure how I can group the column of boxes and add a vertical line behind them.

Any help is appreciated!

Upvotes: 0

Views: 61

Answers (1)

Charles
Charles

Reputation: 437

Here you go DEMO

<div id="container">

    <div id ="horizontal">
        <div id="border2"></div>
    </div>
    <div id="vertical">
        <div id="border"></div>
    </div>

</div>

#container {background: black;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position:relative
}

#vertical {background: white;
    position: absolute;
    width: 70px;
    left: 40%   ;
    height: 300px;
    top:0;
}


#horizontal {background: white;
    position: absolute;


    height: 60px;
    top:40%;
    left:0;
    width: 100%;
}

#border {
    width: 100%;
    height: 150px;

    margin-top: 60px;

    border-top: 2px dashed black;
    border-bottom: 2px dashed black;
}

#border2 {
    width: 80%;
    height: 60px;


    border-right: 2px dashed black;
}

Upvotes: 1

Related Questions