CODEWITHSUNDEEP
htmlcss
Alonso Quesada
Alonso Quesada

Reputation: 125

Using CSS to Draw 3 Vertical Lines on an Image

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

Upvotes: 3

Views: 12297

Answers (4)

kds7ap
kds7ap

Reputation: 47

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>

Upvotes: 0

Shomz
Shomz

Reputation: 37701

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>

Upvotes: 6

robjez
robjez

Reputation: 3788

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

Upvotes: 0

Weafs.py
Weafs.py

Reputation: 22992

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>

Upvotes: 5

Related Questions