Reputation: 241
I want to draw a line between an image, which has a certain width and height. Like Below:
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
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
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
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
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