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

What is the best way to add indentation to HTML code in a code tag?

Looking to insert some Python code into an HTML document using the code tag. Here is an example: <code> for iris, species in zip(irises, classification): if species == 0: print(f'Flower {iris} is Iris-setosa') </ ...

pythonhtml

Is there a way for me to choose every element excluding those contained within a specific div?

Check out my code snippet: <div class="car"> <div class="make">NISSAN</div> <div class="model">MICRA</div> </div> <div class="discontinued"> <div class="car"> <div class="make">FOR ...

htmlcsscss-selectors

Use jQuery.ajax() to submit data in separate rows of a table

At the moment, I have no issues submitting my form as long as it contains only one row in the table. However, when I add a second row, an error occurs and the submission fails. My goal is to be able to post the data from each table row separately with just ...

jqueryhtmlajax

Creating an array object in JavaScript is a straightforward process that involves using the array

Looking to achieve the following object list structure: myObj = {"foo":[1,2,3,4], "bar":[3,5,7,8]} Initial attempt was unsuccessful: var myObj = new Object(); myObj["foo"].push(1) myObj["foo"].push(2) #...etc Seeking guidance on the correct m ...

javascripthtml

Obtaining two divisions that simultaneously display partials in a parallel manner

It's proving difficult to align two divs containing rendered partials side by side within a form. Strangely enough, when I replace the divs with plain text, they respond perfectly to my style changes. However, as soon as I include the render code, the ...

htmlcssruby-on-rails

The integration of ag-grid webpack css is not reflecting on the website as intended

I'm facing an issue with ag-grid in my react application where I can't seem to get the CSS working properly with webpack. The grid is currently displaying like this: image: const path = require("path"); var webpack = require("webpack"); let H ...

cssreactjswebpackag-gridag-grid-react

Refreshing a PNG file without the need to refresh the entire page

Developed a captcha using imagestring imagestring($image, 5, 5, 30, $text, $text_color); imagepng($image,"captcha_image.png"); imagepng($image,"captcha_image.png"); The code snippet above shows part of the implementation. <img ...

javascriptphphtml

How to Customize Password Input Fields in HTML

My input field is set to password type, allowing only a six-digit number: <fieldset> <label for="password-input">Enter New Pin</label> <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" ...

htmlcssinput

Toggle visibility of multiple DIVs with identical classes using radio buttons

I'm looking to streamline my use of radio buttons in HTML. How can I implement a single set of radio buttons at the top that will toggle the visibility of all DIVs with the same class on my webpage? <form> <input type="radio" name="csr_sel ...

javascriptjqueryhtmlforms

Retrieving data via AJAX from an SD card

I am using the Atmel SAM4E-EK microcontroller as a server to host a webpage and send data over HTTP protocol. I am currently facing an issue with the download function while trying to download a file from my sd_card, which will not be larger than 512MB. s ...

javascripthtmlcajaxhttp

Hovering Div Troubles

I've been working on creating a hover effect for the blocks on my website. Everything was going smoothly until I reached the last block. The hover effect appears to be displaced, as shown in this sample link. Although the CSS code I'm using seem ...

htmlcss

Having trouble getting my absolute div to center?

Check out this problem on my server at THIS LINK .login-div{ background: #fff none repeat scroll 0 0; height: 500px; left: 50%; width: 500px; right: 0; z-index: 99999; top: 20%; position: ...

htmlcss

The previous button on Owl Carousel seems to be malfunctioning after navigating from a different page

In my case, I have two distinct pages: let's call them the first and second pages. On the first page, I utilize an owl carousel slider with a tag that links to a specific slide on the second page's owl carousel slider using an ID. Meanwhile, on ...

javascripthtmljquerycssowl-carousel

Several Divs Positioned on Different Pages with Backgrounds That "Scroll"

Currently utilizing: jQuery Mobile 1.4.5 I am interested in knowing if it is feasible to achieve the following, and if so, how to start working on it. At the moment, there are 4 page divs that utilize swipe for navigation between them with a horizontal t ...

jquerycssjquery-mobile

Delete the top row from the table

After extensive searching on various websites, I am still unable to resolve my html or CSS issue. An unexpected line is appearing above the table here. Here's the code snippet that is causing trouble: <table border="0" width="840" cellspacing="0" ...

htmlcsshtml-table

React Bootstrap's drop-down components with a dark theme

In my react application, I am looking to design a custom navbar for the header using react-bootstrap. Specifically, I need a dark styled NavDropdown that changes background color to #f0ad4e on hover. Despite attempting the following code snippet, I couldn& ...

cssreactjsreact-bootstrap

Shifting an HTML anchor to account for a stationary header - Safari compatibility with alternative CSS styling

I made adjustments to my HTML anchors by adding an offset in the CSS to accommodate for a fixed header in my theme: margin-top: -175px; padding-top: 175px; } /* Adjustments for screen sizes of 760px and smaller */ @media (max-width:760px){ #r ...

htmlcsssafari

The onblur event is triggering prior to the value being updated

There are two input fields within a <form> element. I am trying to retrieve the value of one input field (dpFin) once it has been changed. The issue is that when I attempt to get the new value inside the event using var endDt = document.getElementByI ...

javascripthtml

Managing Positioning of PHP Print Statement

Recently, I developed a PHP script for my site that facilitates user registration and login specifically for membership purposes. If a user successfully logs in, the script redirects them to a landing page for members. However, if the login fails, the scri ...

phphtmlcsssqlecho

TinyMCE toolbar missing the "hr" option

I am encountering an issue while using TinyMCE as my editor. I have added the plugin as instructed, but I cannot find the "hr" button/option in the editor interface. If anyone has any insights or solutions to this problem, please share! This is how I am ...

javascriptjqueryhtmltinymcetext-editor