Try to search your question here, if you can't find : Ask Any Question Now ?

Resize and reposition child divs with resizing of parent column

HomeCategory: stackoverflowResize and reposition child divs with resizing of parent column
julie asked 2 weeks ago

I have a child div that is a colored triangle:

 .shape-triangle {
     width: 0;
     height: 0;
     border-left: 25px solid transparent;
     border-right: 25px solid transparent;
     border-bottom: 50px solid $primary;
     position: absolute;
     top: 20px;
     left: 110px;
}

that is nested inside a Bootstrap column with a background image:

<div class="col-12 col-lg-6 text-center">
    <div class="shape-triangle"></div>
    <img src="assets/background.png" alt="Image">
</div>

It sits on top of a background image (a bunch of grayscale shapes):

original

When my screen/browser window is reduced in size, the image resizes but the triangle obviously doesn’t:

reduced-size

How do I get the colored triangle to remain proportional in size and position to the image?

1 Answers
Best Answer
Fernando answered 2 weeks ago
Your Answer

15 + 18 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com