title: How to draw a diagonal line at the center of the <img> element using css
body: <p>I want to draw a line between an image, which has a certain width and height. Like Below:</p>
  
  <p><a href="https://i.stack.imgur.com/7hJ4s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7hJ4s.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <pre><code>&lt;div class="car-left-container"&gt;
     &lt;img alt="" class="car-left" src="images/Car-Left3x.png"&gt;
  &lt;/div&gt;
  &lt;style type="text/css"&gt;
     .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;
     }
   &lt;/style&gt;
  </code></pre>
  
  <p>Any help and suggestions are appreciated. </p>
  
  <p>Thanks</p>