What is the best way to maintain the aspect ratio of a percentage-based clipping path?

I am trying to create a triangle with a background image that is clipped using clip-mask. The percentage is set so it doesn't appear too small or large on different screens.

My issue is that I want the triangle to maintain its proportions as the screen width and height change.

.upper-poly {
    position: absolute;
    width: 80%;
    height: 80%;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:                url(http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

I have created a fiddle showcasing my current setup - but I am struggling to find a solution... any ideas?

http://jsfiddle.net/HrNC6/3/

css

Answer №1

Here is a potential solution to the issue:

.triangular-shape {
    position: absolute;
    width: 80%;
    height: 0%;
    padding-bottom: 80%;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:             url(http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

However, if the window aspect ratio is too wide, the triangle may be cropped.

This approach relies on the fact that vertical padding as a percentage is calculated based on the parent element's width rather than its height.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing intricate inline styles in React for interactive features like hover and active states on components like buttons

I'm currently styling my buttons using the following CSS with Bootstrap. .btn-primary { background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; border-color: #1f90bb #1f9 ...

javascriptcssreactjssass

When the screen size decreases, the button overflows from its containing div

I'm currently working on creating a to-do list with an edit button that matches the height of the div on normal or larger screens. However, when the screen size is reduced to less than 500px, the button collapses and extends beyond its div. Here' ...

javascripthtmlcssreactjsresponsive-design

Identify the browser type and version using jQuery for optimal compatibility with responsive design

I am aiming to develop three unique design templates based on the browser version and size. Rather than relying solely on responsive design principles, I want the design to automatically adjust and apply the new layout when the user changes the browser siz ...

jquerycss

What could be causing the image's width not to adjust when I apply "width: 8%;" in CSS?

Recently delving into the world of react, I set out to create a basic website featuring music notes (represented by simple images) that would change color upon hovering over them. While aware of the traditional :hover method, I decided to challenge myself ...

javascripthtmlcssreactjswidth

Cause a bootstrap column to have overflowing content rather than expanding

I've searched extensively for the solution to my problem, but haven't found a satisfactory answer yet. My goal is to create a location finder with a map on the right and a list on the left. With over 18,000 locations to search through, the list ...

htmlcssbootstrap-4

The jQuery menu is malfunctioning in Internet Explorer due to the Document Mode being set to Quirks

I am encountering an issue where the below code is not functioning properly in Internet Explorer's document mode quirks. Each time I hover over the submenu, its length doubles unexpectedly. Can someone please provide assistance with this matter? < ...

javascriptjquerycsskendo-ui

While developing a scene switch program in JavaFX, I encountered an error when attempting to switch scenes. Interestingly, the error disappears when CSS is not used – the program works perfectly without

Here is My Main.java File import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.*; import javafx.stage.Stage; public class Main extends Application { @Override public void start(Stage stage) { try { ...

javacssjavafxfxml

File transformation through CSS upon the addition of a new file

There is an issue with my files menubar.php and Homepage.php. When I include menubar.php in Homepage.php, it causes a change in the overall CSS of Homepage.php. The padding, margins, div height, and width all become scattered. I have attempted to troubles ...

css

What would be the best method for refreshing CSS following the dynamic addition of data using jQuery for optimal efficiency?

This paragraph was inserted following an ajax request: <tr id="product1" class = "success"> <td>1</td> <td>product one</td> </tr> The success class gives the row a green background, but this style is not applie ...

javascriptjquerycsstwitter-bootstrap

Modify the border color of a div contained within another div

I recently incorporated a Vue component (available at ): <vue-editor id="description" name="description" :class="{'uk-form-danger': errors.has('description') }" v-model="description" :editorToolbar="customToolbar" v-validate="' ...

cssvue.js

Issues with the functionality of Bootstrap

Upon loading the page, I am encountering an issue with a collapse on the 'main' id. It fails to collapse initially and only functions correctly after being clicked. I have not utilized 'collapse in', so I am unsure why this behavior per ...

htmlcsstwitter-bootstrapuser-interface

Customize Your Lists in Wordpress to Reflect Your Unique Style

I need help with styling a specific text widget in Wordpress by adding a FontAwesome icon as a list bullet. I have the following CSS code: .covenant li { counter-increment: my-awesome-counter; margin: 0.25rem; } .covenant li:before { font-family: 'Fo ...

htmlcss

"The combination of Windows, @font-face, and Cyrillic characters presents a

I am encountering an issue with font-face and Cyrillic characters. The fonts display properly in any browser on OS X, but fail to render on a Windows 7 machine (chrome, ie etc). Even after putting the fonts through Font Squirrel and testing the demo files ...

htmlcsswindowsfont-facewebfonts

Tips for aligning one item in the center and another item on the right with MUI v5

My goal is to center 3 navigation tabs in the middle of my page and have a dropdown on the far right for sorting. I managed to get the dropdown on the far right, but I'm having trouble perfectly centering the 3 navigation tabs inside the <Box> & ...

cssreactjsflexboxmaterial-ui

When using AJAX, the image may not appear on the initial request but will display on subsequent requests

I encountered a peculiar issue where I am trying to display a loading spinner icon while making an AJAX request. Strangely, the spinner does not appear for the first request (such as after manually refreshing the page) but shows up for all subsequent reque ...

htmljquerycssajax

The div does not extend fully across the page

I have tried following similar instructions on Stackoverflow but to no avail. Even after setting margin:0 and padding:0 in my code, the issue persists. The first div represents the side bar, the second div is the content (blue), and there is mysterious wh ...

htmlcss

Center the ordered list using margin:auto

Does anyone know how to properly set margin-auto on an ordered list? I'm having trouble with it in a complex setup. Unfortunately, I can't create a fiddle for demonstration purposes, but you can see the problem here. I want the ordered list on t ...

csshtml-listsmargin

The jQuery hide method is not functioning as expected

Looking for a unique pop-up window to display on my homepage with the option to close it by clicking an X button. Here is the custom CSS: .sign-up-modal { width: 590px; height: 464px; position:fixed; z-index:700; top:180px; left:50%; background-image: url ...

jqueryhtmlcss

To update the current element's style, utilize the .prev() method

I have a set HTML code that I am unable to modify. My goal is to change the color of all bar-appointment elements to match the background-color of the preceding bar-something. The HTML code I am working with is as follows: <div class="bar-something ...

jquerycss

Update Table Row Background Color in Separate Table by Clicking Button Using JQuery

Two tables are involved in this scenario - one that receives dynamically added rows, and another that stores the data to be included. The illustration above displays these tables. Upon clicking the Edit button, the information from the selected row in Tab ...

javascriptjquerycssasp.net