Determining the dimensions and placement of a triangular div element relative to its containing parent

Question

Determining the dimensions and placement of a triangular div element relative to its containing parent

I created a child div that forms a colorful triangle shape:

 .shape-triangle {
     width: 0;
     height: 0;
     border-left: 25px solid transparent;
     border-right: 25px solid transparent;
     border-bottom: 50px solid green;
     /* placed on top of an image */
     position: absolute;
     top: 20px;
     left: 110px;
}

This colored triangle is nested within a Bootstrap column containing 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>

The triangle sits above a grayscale shapes background image:

https://i.sstatic.net/kzjY3.png

However, when I resize the screen or browser window, only the background image resizes while the triangle remains fixed in size and position:

https://i.sstatic.net/5l1ZF.png

What adjustments can be made to ensure that the colored triangle maintains proportionality in size and position relative to the background image?

html twitter-bootstrap css bootstrap-4

Answer 1

Answer №1

To ensure the div rescales appropriately with either the screen size or its parent container, it is essential to use the unit % for the .shape-triangle class. Using px as a unit will not yield the desired results, as it maintains a fixed size while the parent element .col-12 is subject to change. Additionally, employing the unit rem for borders allows for consistent sizing relative to the root font.

My recommendation would look similar to this code snippet (adjust the % and rem values as needed):


.shape-triangle {
     border-left: 2.5rem solid transparent;
     border-right: 2.5rem solid transparent;
     border-bottom: 5rem solid green;
     /* maintain position and size */
     position: absolute;
     top: 20%;
     left: 50%;
     width: 0;
     height: 0;
}

Answer 2

To ensure the div rescales appropriately with either the screen size or its parent container, it is essential to use the unit % for the .shape-triangle class. Using px as a unit will not yield the desired results, as it maintains a fixed size while the parent element .col-12 is subject to change. Additionally, employing the unit rem for borders allows for consistent sizing relative to the root font.

My recommendation would look similar to this code snippet (adjust the % and rem values as needed):


.shape-triangle {
     border-left: 2.5rem solid transparent;
     border-right: 2.5rem solid transparent;
     border-bottom: 5rem solid green;
     /* maintain position and size */
     position: absolute;
     top: 20%;
     left: 50%;
     width: 0;
     height: 0;
}

Determining the dimensions and placement of a triangular div element relative to its containing parent

Answer №1

Similar questions

Turning a bootstrap form input into a clickable element by adding a font-awesome icon

Two separate Bootstrap dropdowns are failing to function independently from each other

HTML - HREF standard for efficiently linking to directories in web development

Make sure all of the inner tags are properly contained within their respective containers

Streaming videos using Flask with a custom template

Trimming Text with JQuery

CSS - Issue with table cell height exceeding in Mozilla Firefox and Internet Explorer

Implementing interactive dropdown menus to trigger specific actions

Moving the center div to the top of the content for mobile screens

What is the correct way to retrieve the location offset of a specific DOM element?

The material UI tabs text is missing the ellipses due to a coding error

Looking for an Angular Material component that displays a list of attributes?

Efficiently determine optimal menu item dimensions using CSS automatically

PHP Ajax Image Uploading and Storage

The disappearing act of the Bootstrap 4 hamburger icon, despite the navbar expanding afterwards

Overflow leads to the entire page scrolling

Refreshing an iframe located on disparate domains

The iOS platform is experiencing issues with displaying the entire page, making it difficult to

The downward trajectory of the Hamburger Menu is uncompromised, yet it refuses

Gradually fade with JavaScript