Can you actually achieve the creation of an Equilateral responsive triangle with a background image using CSS?

It's important that it works in IE11 as well. I've attempted:

  • Using traditional triangle-creating techniques with borders - Unsuccessful, no background image appeared.

  • Clip-path - Failed, no support in IE

  • Triangles created using skewing and transforming struggled with maintaining proper percent-based lengths. Despite spending around 3 hours trying to solve the issue - Failed

I may make one last-ditch effort by creating an SVG mask with a cut-out triangle and positioning it over the desired image in the <div>. However, this solution feels like a workaround.

htmlcsssvg

Answer №1

Here is an approach to achieve it:

.base {
  width: 70%;;
  height: 200px;
  margin: 10px;
}

.test {
  background-image: url(http://lorempixel.com/600/600);
  width: 100%;
  height: 0px;
  padding-top: 86.6%;
  position: relative;
}

.test:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 50%;
  bottom: 0px;
  background-image: linear-gradient(-60deg, transparent 50%, white 50%);
}

.test:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 50%;
  bottom: 0px;
  right: 0px;
  background-image: linear-gradient(60deg, transparent 50%, white 50%);
}
<div class="base">
  <div class="test"></div>
  </div>

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

Improve the way you manage the active selection of a button

ts isDayClicked: { [key: number]: boolean } = {}; constructor() { } setSelectedDay(day: string, index: number): void { switch (index) { case 0: this.isDayClicked[0] = true; this.isDayClicked[1] = false; this.isDay ...

htmlcssangulartypescriptionic-framework

Stop flex child from shrinking in size

I have a form row with two inputs. There is a requirement to show ⚠️ (warning emoji) next to the second input in the row, based on the input number. However, because of how flexbox behaves, the input size gets reduced... How can I maintain the input s ...

htmlcssreactjsbootstrap-4flexbox

Arrange the menu items in a column layout based on a given condition

Can someone assist me with displaying the menu subitems? I have created a plunker. Take a look at it to understand what I need (open plunker in full screen) https://plnkr.co/edit/IMEJFPfl5kavKvnUYaRy?p=preview In the plunker above, there are two dropdown ...

htmlcssangularjsangular-ui-bootstrap

Removing the restriction on maximum width to 100% and allowing for automatic height adjustment

Within my project, I have implemented a CSS technique where all images within a container are set with the attributes max-width: 100%; and height: auto;. This is done to ensure that images scale down appropriately when the viewport and container size decre ...

htmlcssimageresponsive-design

Deactivate the signup button automatically when the user is not present, without the need to refresh

To determine user availability, the system will check the table of users. If the user is available, the signup button will be displayed; otherwise, the button will remain disabled or its color may change. ...

javascripthtmlajax

Flexbox functionality with a specific focus on Kindle Fire device compatibility

I'm curious about the support for flexbox on Kindle devices and looking for more information on overall support. It seems that some properties like display:flex and flex-wrap:wrap/nowrap are not supported, at least on older Kindle Fire devices (newer ...

cssflexboxkindle-fire

Changing the background color of the legend text when hovering over a d3 doughnut chart

I have a doughnut chart that displays values on mouse hover. However, I would like to change the background of the legend text when hovering over the respective area of the doughnut chart. return { restrict: 'E', scope: { values: ...

htmlcssangularjsd3.js

"Create dynamic tables with AngularJS using ng-repeat for column-specific rendering

I have a model called Item with the following structure: {data: String, schedule: DateTime, category: String} I want to create a report that displays the data in a table format like this: <table> <tr> <th>Time Range</th&g ...

javascripthtmlangularjs

Confirming class Value with Selenium IDE

I am looking to confirm the value of a specific class within an HTML code using Selenium IDE. Specifically, I want to retrieve the value of: data-val located under the class named tgl. In my example, this value can be either 0 or 1. How can I achieve thi ...

cssclassseleniumxpathselenium-ide

Raising css properties using jquery

Is there a way to adjust CSS values using jQuery? I am looking to specifically increase values like top and left, but my current attempt is not producing the desired outcome: var left = 5; $(.object).css("left" + 5); The challenge I am facing is that I ...

jquerycss

Combining strings within angular brackets within HTML tags

Is there a way to concatenate strings within jinja brackets {{ }} in HTML? For example: <img src="{{ image.file.name }}"> I want to combine it with the image.file.name. For instance: <img src="{{ 'https://s3.ap-south-1.amazonaws.com/bucket ...

pythonhtmlstringjinja2string-concatenation

Icon not appearing within the input group

Is there a way to design an input group that includes both a text field and an icon placed at the beginning of the text field? The code below demonstrates my attempted implementation, however, it appears that only the text field is visible without the acco ...

htmlcssinputiconsbootstrap-5

Is the background image unable to fill up the entire screen?

I'm currently facing an issue with my webpage's background not covering the entire vertical space. Despite trying different solutions and referring to previous posts, I haven't been able to resolve it yet. Here is the relevant code: <div ...

htmlcss

Why is the right float positioned below the container?

I am struggling to figure out why my float: right; div is appearing below the container div. I need help understanding how to resolve this issue. Can anyone provide an explanation? I faced a similar problem on a different website in the past, but I can&apo ...

htmlcss

What are some methods for utilizing the "name" attribute within React components?

About My Coding Environment Utilizing TypeScript and ReactJS The Issue with Using name as an Attribute Encountering the following error: Type '{ name: string; "data-id": string; "data-type": string; }' is not assignable to ...

htmlcssreactjstypescript

Enhance Your Website with Stunning Bootstrap Icons

I have been attempting to utilize this bootstrap signup template here, but upon rendering it, the icons for the user, email, password, and so forth are not appearing as expected. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email ...

htmlbootstrap-5

Is there a way to synchronize the expanded row data with the columns of the main table in Material UI's collapsible table?

I have a feature where, upon clicking the expand icon, a row is expanded. I am looking to align the data of these expanded rows with the columns of the main table. To achieve this, I am utilizing Material UI's collapsible table component! How can I i ...

htmlcssreactjsmaterial-ui

Why is it that an HTML entity-containing string doesn't show the character after going through the htmlspecialchars() function?

In my project, I have a string of text retrieved from the SQL database which is then sanitized using PHP's strip_tags and htmlspecialchars functions to eliminate any HTML formatting that users might try to inject. This processed text is displayed in b ...

phphtmlhtml-entitieshtmlspecialcharsstrip-tags

Incorporating additional text following the creation of an image composite using HTML5

I am facing an issue with positioning two images on a canvas using HTML5. Despite changing the x and y properties, the images remain stuck at the top left corner (0, 0). This is different from how I can position text easily on the canvas. <canvas width ...

javascripthtmlcanvashtml5-canvas

"Crafting a sleek card design using Material UI components in React JS

Exploring the world of material UI and looking to create a card with an image and footer. However, I'm facing challenges as there is no default option for adding a footer in the card. https://i.stack.imgur.com/xlxyb.png I want the image to be center ...

cssreactjsmaterial-ui