Using CSS to Draw 3 Vertical Lines on an Image

Question

So I'm really new using CSS, I need to add 3 vertical red lines on top of an image, the lines have to split the image in 4 equally sized parts. The size of the image is always 465*346 and the mark up I have so far looks like this

CSS:

.logo-container {
    position: relative;
    height: 87px;
    width: 35%;
    margin: 0 auto;
    min-width: 144px;
}

.logo {
    position: relative;
    width: 72px;
    height: 87px;
    z-index: 2;
}

.logo-line {
    position: relative;
    display: inline-block;
    top: -50%;
    width: 20%;
    height: 2px;
    background: #333;
}

HTML:

<div id="preview-image-wrapper">
   <span class="firstOverlayLine" ></span>
   <span class="secondOverlayLine"></span>
   <span class="thirdOverlayLine"></span>
   <img id="mainImage" type="image" class="mainimage" data-bind="attr: {src: SelectedImagePath}" />
</div>

The above is my attempt to modify this example to make it fit my needs, but with no success so far.

The end result should look like:

Every part divided should be the same size

Could you add an image of what it should look like? I'm having trouble imagining the end result. — Ian Hazzard, Dec 15 '14 at 16:25
Do you need to use an img element, or you'd be happy to have it as a background-image on preview-image-wrapper div instead? — robjez, Dec 15 '14 at 16:32
Done, they are not equal on the sample, but the idea is to have all 4 parts be roughly the same size — Alonso Quesada, Dec 15 '14 at 16:33

score 6 · Accepted Answer · edited Jul 10 '19 at 17:03

6

You can do something raw like this - floating 1px-wide spans over the image, keeping your original HTML:

div {
  width: 465px;
  position: relative;
}

span {
  position: absolute;
  display: block;
  height: 346px;
  width: 1px;
  background: red;
}

.firstOverlayLine {
  left: 25%;
}

.secondOverlayLine {
  left: 50%;
}

.thirdOverlayLine {
  left: 75%;
}

<div id="preview-image-wrapper">
   <span class="firstOverlayLine"></span>
   <span class="secondOverlayLine"></span>
   <span class="thirdOverlayLine"></span>
   <img src="http://placehold.it/465x346">
</div>

edited Jul 10 '19 at 17:03

Haifeng Zhang

30,077
19
81
125

answered Dec 15 '14 at 16:39

Shomz

37,421
4
57
85

This worked great.... just another quick question, after implementing this I realized that all images had a kind of a header on them of about 15px so I now want the red line to not go all the way to the top of the image but about 15px from the top, so I tried adding a css rule of Top:15px but it does it from the top of the page instead of the div... any idea how to properly do this> – Alonso Quesada Dec 15 '14 at 17:56
You can try `margin-top: 15px`. – Shomz Dec 15 '14 at 17:57

Weafs.py · Answer 2 · 2014-12-15T16:45:51.577

5

You could use :before and :after :pseudo-elements.

#img {
  position: relative;
  width: 465px;
  height: 346px;
  background: url(http://dummyimage.com/465x346/ddd5ed/fff);
  border: 1px solid red;
}
#img:before, #img:after {
  position: absolute;
  content: '';
  width: 25%;
  height: 100%;
  top: 0;
  left: 25%;
  border-left: 1px solid black;
  border-right: 1px solid black;
  box-sizing: border-box;
}
#img:after {
  left: 75%;
  border-right: 0;
}

<div id="img"></div>

edited Dec 15 '14 at 16:45

answered Dec 15 '14 at 16:32

Weafs.py

22,731
9
56
78

1

Still 2 lines - you'll have trouble making 3 lines with pseudo-elements. – Shomz Dec 15 '14 at 16:36
@chipChocolate.py - it need to be split into 4 equal parts – robjez Dec 15 '14 at 16:36
just make the width to 25% and left to 50% – Ankit Chaudhary Dec 15 '14 at 16:42
@ankitchaudhary And the third one? – Shomz Dec 15 '14 at 16:42
Downvote for stealing @web-tiki's code, just changing the colors. – Shomz Dec 15 '14 at 16:47
@shomz whats the third one? It will divide it into 4 equal parts...as shown by web-tiki – Ankit Chaudhary Dec 15 '14 at 16:49
@ankitchaudhary web-tiki showed his example much later... at that time we have 2 lines... – Shomz Dec 15 '14 at 16:50
1

easy guys, anyone can use "my code" I'm just trying to help :) – web-tiki Dec 15 '14 at 16:52
@web-tiki - I didn't though. You can look at the code, its totally different. – Weafs.py Dec 15 '14 at 16:54
@Shomz....this what i was talking about [codepen](http://codepen.io/anon/pen/gbrEbN) – Ankit Chaudhary Dec 15 '14 at 16:58

score 0 · Answer 3 · answered Dec 15 '14 at 17:00

Alternative using unordered list:

http://jsfiddle.net/a4q63mwc/

<div id="preview-image-wrapper">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <img src="http://placehold.it/465x346" />
</div>   


div, img {
  width: 465px;
  height: 346px;
  position: relative;
}

ul { 
    margin:0;
    padding:0;
    list-style-type: none;
    position: absolute;
    display: block;
    height: 346px;
    width:100%;
    z-index:200;
    overflow:hidden;
}
li { 
    height:346px; 
    border-right:1px solid red; 
    width:25%; 
    display:inline-block;
    margin-right: -4px;
}

score 0 · Answer 4 · answered Jun 05 '20 at 05:01

For a horizontal line, if someone needs it.

div {
  width: 465px;
  position: relative;
}

span {
  position: absolute;
  display: block;
  height: 2px;
  width: 465px;
  background: red;
}

.firstOverlayLine {
  top: 50%;
}

<div id="preview-image-wrapper">
   <span class="firstOverlayLine"></span>
   <img src="http://placehold.it/465x346">
</div>

Using CSS to Draw 3 Vertical Lines on an Image

4 Answers4

Linked