CODEWITHSUNDEEP
htmlcss
Archana
Archana

Reputation: 241

How to draw a diagonal line at the center of the <img> element using css

I want to draw a line between an image, which has a certain width and height. Like Below:

enter image description here

This is what I have tried. With this approach, on window resize the line drawn for div and the actual image has displacement. I want it more responsive. Meaning as the window resizes I want to position the line and the image together seamlessly as though they are a single component.

<div class="car-left-container">
   <img alt="" class="car-left" src="images/Car-Left3x.png">
</div>
<style type="text/css">
   .car-left {
     width: 100px;
     height: 100px;
     left: 30%;
     position: absolute;
     top: 80px;
     transform: rotate(30deg);
   }
   .car-left-container {
     position: relative
   }
   .car-left-container:after {
     content: '';
     position: absolute;
     left: 0;
     border-top: solid 0.5px #e6e8eb;
     background: black;
     width: 100%;
     z-index: -1;
     opacity: 0.5;
     transform: rotate(-38deg);
     top: 33px;
   }
 </style>

Any help and suggestions are appreciated.

Thanks

Upvotes: 0

Views: 660

Answers (4)

Ori Drori
Ori Drori

Reputation: 193358

You can use a linear gradient, and change the angle. You can use the background position to move the line:

.car-left {
  width: 100px;
  height: 100px;
  left: 30%;
  position: absolute;
  top: 80px;
  transform: rotate(30deg);
}

.car-left-container {
  width: 50vw;
  height: 50vh;
  border: 1px solid black;
  background: linear-gradient(-25deg, transparent calc(50% - 1px), black 50%, transparent calc(50% + 1px)) no-repeat;
  background-position: -10vw -10vh;
}
<div class="car-left-container">
  <img alt="" class="car-left" src="images/Car-Left3x.png">
</div>

Upvotes: 1

Archana
Archana

Reputation: 241

This worked for me. I had to just remove position: absolute for car image.

CSS / HTML:

.car-left-container {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
}

.car-left {
  width: 100px;
  height: 100px;
  transform: rotate(30deg);
  margin-left: -50px;
}

.car-left-container:after {
  content: '';
  position: absolute;
  left: 0;
  border-top: solid 0.5px #e6e8eb;
  background: black;
  width: 100%;
  z-index: -1;
  opacity: 0.5;
  transform: rotate(-38deg);
  top: 0;
}
<div class="car-left-container relative">
  <img alt="" class="car-left" src="images/Car-Left3x.png">
</div>

Upvotes: 0

Fahim Khan
Fahim Khan

Reputation: 405

I hope this will work for u.

<style type="text/css">
  .car-left-container{
      position: relative;
      width: 100%;
      height: 500px;
      top: 0;
      left: 0;
  }
  .car-left {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%) rotate(30deg);
  }
  .car-left-container:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(-38deg);
    border-top: solid 0.5px #e6e8eb;
    width: 100%;
    z-index: -1;
    opacity: 0.5;
  }
</style>

<div class="car-left-container relative">
 <img alt="" class="car-left" src="images/Car-Left3x.png">
</div>

Upvotes: 0

Ivana Bakija
Ivana Bakija

Reputation: 354

I am not sure what size and angle the line should be.

HTML:

<div class="car-left-container relative">
    <img alt="" class="car-left" src="images/Car-Left3x.png">
</div>

CSS: 

 .car-left {
     width: 100px;
     height: 100px;
     left: 30%;
     position: absolute;
     top: 80px;
   }
   .car-left-container {
     position: relative;
     width: 100px;
     height: 100px;
     transform: rotate(30deg);
   }

   .car-left-container:after {
     content: '';
     position: absolute;
     left: -20px;
     border-top: solid 0.5px #e6e8eb;
     background: black;
     width: 200%;
     z-index: -1;
     opacity: 0.5;
     transform: rotate(90deg);
     top: 113px;
   }

Upvotes: 0

Related Questions