Tips on positioning an image within a div to create a unique angle

I'm looking for a way to maintain the cropped image but place content inside it with an opacity filter on the div. The challenge I am encountering is getting the angles to match up correctly and not being able to use an overlap hidden feature. Can anyone assist me in finding a solution? It's unfortunate that using ::after on the image to add a filter div won't work to darken a section. :(

.promo {
  position: relative;
}

.promo img {
  -webkit-clip-path: polygon(0 16%, 100% 0, 100% 100%, 0% 84%);
  clip-path: polygon(0 16%, 100% 0, 100% 100%, 0% 84%);
}

.promo__content {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100% color: #fff;
  background: black;
}
<div class="promo">
  <img src="https://i.picsum.photos/id/100/600/600.jpg" >
  <div class="promo__content">
    Content Here
  </div>
</div>

This is an example of what I am attempting to achieve – incorporating a transparent black box within the angled image:

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

htmlcssclip-path

Answer №1

To achieve the desired result, you should apply the clip-path property to the entire container and not just the image:

.container {
  margin:50px 0;
  clip-path:polygon(0 16%, 100% 0, 100% 100%, 0% 84%);
  display:flex;
}
.box {
  width:30%;
  padding:80px;
  box-sizing:border-box;
  background:#000;
  color:#fff;
}
.img {
  width:70%;
  background:url(https://i.picsum.photos/id/1074/1000/1000.jpg) center/cover;
}
<div class="container">
    <div class="box">
      Insert text here<br>
      Insert text here<br>
      Insert text here<br>
      Insert text here<br>
      Insert text here<br>
    </div>
    <div class="img"></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

Differences in behavior of multiple select with track by in Angular versions above 1.4.x

I recently upgraded my product from Angular 1.2.x to 1.4.x. Since updating to angularjs 1.4.x, I've encountered an issue: What I have: I included code snippets for both angular 1.2.0 and 1.4.8. You can check out the comparison on JSFIDDLE. Explanat ...

javascripthtmlangularjshtml-select

How to ensure AngularJS automatically updates the latest value in the HTML code

I am currently working on my first AngularJS application, which is a timer. I have been self-teaching Angular and have encountered an issue with updating the timer on the HTML side. Although I can see the updated values in the console.log outputs, the time ...

javascripthtmlangularjscontrollerdynamic-programming

Failure to capture spaces in onChange events for <input> elements

I'm having an issue where the onChange event is not being called on my HTML input element when pressing the space bar. Here's a snippet of what I've tried: class FilterDropDown extends React.PureComponent { state = { query: '&ap ...

htmlreactjs

How can I change the background color as the page is scrolled without using jQuery?

Does anyone know how to create a transition effect with CSS where the background color fades into another color based on the position of the page, similar to the effect triggered by divs with the same class? I came across a JavaScript solution that works p ...

csscss-transitionstransitionbackground-colorfade

The relationship between the size attribute in HTML and CSS styling based on element size

On one of my pages, there is an input field that looks like this: <input type="text" size="20" name="whatever" /> I would like to keep the size attribute for the input field instead of using CSS. Now, I want to add a select box to the same form wit ...

htmlcss

Discover HTML tags

I am currently working on a solution to identify and retrieve the first HTML tag from a given string of HTML. If no tag is found, I aim to return null as the output. An example of a tag would be something like <b>. After exploring various methods wi ...

javahtmlstring

Safari showing white flash upon setting background-image src using Intersection Observer?

I've done extensive research but I'm still struggling to solve this issue. It only seems to be happening on Safari (Mac & iOS), while everything works smoothly on Chrome, Firefox, Edge, and other browsers. UPDATE: The flickering problem also per ...

javascriptcssintersection-observer

Is there a way to isolate a section of a webpage from the usual styling and CSS regulations without using an iframe?

Is there a way to have a specific section of a webpage ignore all current CSS rules and stylesheets, similar to how content within an iframe disregards the styling of its parent? The scenario here is that I am using a template editor where users can see l ...

javascriptjqueryhtmlcsslayout

What is the method of obtaining the file name of the current template within a Jinja2 template?

If I have a code snippet like return render_template('index.html', users=users), is there a way to access the filename within the template without having to pass it explicitly from the view? ...

pythonhtmljinja2

When viewed in IE11, each element with { display: table-cell } styling is displayed on a separate line

Here is the HTML code snippet (JSFiddle): <div class="form-group tabled-contents"> <div style="display: table-row;"> <input id="BodyContentPlaceholder_TxtCustomerId" type="text"> <input id="BodyContentPlaceholder_B ...

htmlcssinternet-explorerbrowsercross-browser

What are the implications of using :root along with the universal selector in CSS to overwrite Bootstrap variables?

As I work on theming my website, which utilizes Bootstrap, I am making adjustments to the Bootstrap variables. Some variables are defined against the :root element in a way that allows me to easily override them: :root { --bs-body-color: red; } Howeve ...

cssbootstrap-5

Changing the background color of navigation items when the navbar in Bootstrap 4 adjusts for responsiveness

Hi there, I'm having an issue with my Bootstrap 4 navbar. When I test the responsiveness of my page, the background color of my nav-items disappears and only the text is visible. Can someone guide me on how to maintain the navbar color when I click th ...

htmljquerycsstwitter-bootstrapbootstrap-4

What is the best way to generate a table with continuously updating content?

If the user input : $sgl = 2; $dbl = 0; $twn = 1; $trp = 0; $quad = 0; $price_room = 250000; I want the result looks like the picture below : https://i.sstatic.net/iQYqr.jpg I have tried the following code : <?php $sgl = 2; $dbl = 0; ...

phphtmlcss

Utilizing HTML, CSS, and JavaScript to dynamically add and remove a class from

I've been struggling with a specific issue in my 9-button grid. When I click on a button and it changes color to orange, if I click on another button, both buttons remain orange. What I want is for only one button at a time to be orange - when a new b ...

javascripthtmlcssbutton

How can you conceal nested elements within a layout that adjusts to various screen sizes or is percentage-based

Contemplate this HTML: <body> <div id="parent"> <div id="child"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien congue, fringilla justo quis, aliquam tellus. Maecenas semper consectetur metus ege ...

htmlcssoverflow

What is the process for immediately changing the background color of an input field as soon as text is entered?

I am encountering an issue with the code snippet provided below. My goal is to change the background color of an input field as soon as I start typing something into it. The scenario involves 4 input fields where if the submit button is clicked and any f ...

javascripthtmlcss

I'm using Bootstrap (version 5.3) and when I tried to replicate the features from the examples, I noticed that the background isn't being copied over

I encountered an issue today while working on a website using bootstrap. I was copying features from examples in the bootstrap section, but when I pasted the code into my coding platform, the background appeared transparent and did not display as expected. ...

htmlcssbootstrap-5

A guide on styling JSON key values within HTML

I need help organizing my JSON Document on an HTML page. Here is the JavaScript code I am using: xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // Optionally, here you can update ...

javascripthtmljson

Create a CSS border that resembles the one used in Google's signup form

lies a curious inquiry: what unique border style is in play here? It rests slightly raised against the backdrop, creating an intriguing visual effect. After combing through various sources online, the answer still eludes me. Perhaps turning to Google' ...

css

`How can I trigger a JavaScript event when the content of an input field is modified?`

Currently, I am working on implementing validation in JavaScript. My goal is to provide the user with an alert whenever they modify the value of an input field. <input type="text" name="onchange" id="onchange" size="35" maxlength="50" /> ...

javascripthtml