I'm looking to create diagonal cuts on images using clip-path or skew CSS to mimic the example image while eliminating white spaces and ensuring seamless transitions. How can I achieve this effect?

Is there a way to eliminate the white spaces in my cuts using clip-path or achieve the same design as shown in the image with images placed next to each other? Can you provide guidance on how to do this?

https://i.sstatic.net/Zxs0z.jpg

This is my CSS code:

.cont__imagenes{
        display: flex;
    }

    .img__{
        height: 500px;
        width: 350px;
        object-fit: cover;
    }

    .corte_inicial{
        clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%);
    }

    .corte_diagonal{
        clip-path: polygon(55% 0, 100% 0, 50% 100%, 0 100%);
    }

    .corte_final{
        clip-path: polygon(55% 0, 100% 0, 100% 100%, 0 100%);
    }

This is my HTML code:

<div class="cont__imagenes"> <div class="subcont__imagenes"> <img class="img__ corte_inicial" src="https://source.unsplash.com/random/?winter,night" alt=""> </div> <div class="subcont__imagenes"> <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?space,night" alt=""> </div> <div class="subcont__imagenes"> <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?winter" alt=""> </div> <div class="subcont__imagenes"> <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/900×700/?space" alt="personas"> </div> <div class="subcont__imagenes"> <img class="img__ corte_final" src="https://source.unsplash.com/random/?montain" alt=""> </div> </div>
htmlcss

Answer №1

To achieve a seamless display of images next to each other, you must ensure an overlap of 50% between them (keeping the polygon at 50% and not 55% to avoid non-parallel sides):

.cont__imagenes {
  display: flex;
}

.img__ {
  height: 500px;
  width: 350px;
  object-fit: cover;
}

.corte_inicial {
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
}

.corte_diagonal {
  clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);
  rtransform: translateX(-50%);
  margin-left: -175px;
}

.corte_final {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -175px;
}
<div class="cont__imagenes">
  <div class="subcont__imagenes">
    <img class="img__ corte_inicial" src="https://source.unsplash.com/random/?winter,night" alt="">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?space,night" alt="">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?winter" alt="">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/900×700/?space" alt="personas">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_final" src="https://source.unsplash.com/random/?montain" alt="">
  </div>
</div>

If you prefer borders between the images, adjust the positioning slightly and utilize a background that will be visible through the gaps:

.cont__imagenes {
  display: flex;
}

.img__ {
  height: 500px;
  width: 350px;
  object-fit: cover;
}

.corte_inicial {
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
}

.corte_diagonal {
  clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);
  margin-left: -170px;
}

.corte_final {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -170px;
}
<div class="cont__imagenes">
  <div class="subcont__imagenes">
    <img class="img__ corte_inicial" src="https://source.unsplash.com/random/?winter,night" alt="">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?space,night" alt="">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/?winter" alt="">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_diagonal" src="https://source.unsplash.com/random/900×700/?space" alt="personas">
  </div>
  <div class="subcont__imagenes">
    <img class="img__ corte_final" src="https://source.unsplash.com/random/?montain" alt="">
  </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

When it comes to using jQuery, I find that it only functions properly when I manually input the code into the Google Chrome console. Otherwise

Below is the HTML snippet: <textarea cols="5" disabled id="textareRSAKeypair"> @Model["keypair"] </textarea> <a href="#" class="btn btn-primary" id="downloadKeypair">Download Key</a> Here is the jQuery code: <script src="ht ...

javascriptjqueryhtmlcss

Guide to switching between 3 classes with mouseover using JavaScript

Currently, I am dealing with an unordered list that contains 4 items. The goal is to have the list grow to 100% of its width when hovered over, while all 'noun hovered li' items should shrink to a width of 0%. Once the cursor leaves, everything s ...

javascripthtmlcss

Arrange elements both at the beginning and the end of a line using FlexLayout in Angular

Using the Angular flexlayout library in angular 7/8, I am trying to align 4 buttons on the left side (flex-start) and two checkboxes on the right side (flex-end) at the same level. I would prefer to achieve this layout using the flexlayout Angular library. ...

htmlcssangularflexboxangular-material

Seeking a JavaScript tool specialized in compressing POST data?

Currently working on a chrome extension that sends HTML strings to a server using POST requests. Interested in compressing these large strings before sending them. Wondering if there are any JavaScript libraries that can help with this? ...

javascripthtmlcompression

The mobile version of the page has extra white space at the bottom

I have a responsive design that is working well, but I am experiencing an issue on mobile devices where there is white space at the bottom of the page. * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; ...

htmlcss

What is the best way to fetch images from a JSON object in a React application?

I have been trying to load images from an array of objects in React, but I keep encountering a "module not found" error. This issue has been frustrating me for the past couple of days. Can someone please help me troubleshoot this problem or provide some su ...

javascripthtmljsonajaxreactjs

Ways to Halt Every Single CSS Animation

Is there a way to stop all CSS animations in a document from the beginning? My idea is to assign a class to elements containing CSS animations at the start, such as '.paused'. Then, using jQuery in my JavaScript, I would remove the '.paused& ...

jquerycssanimationcss-animations

Having trouble with CSS when using jQuery's gt() selector?

While working with jQuery, I encountered a warning from Firefox regarding the following code snippet: $("li.example div.code:gt(4)").hide(); Firefox indicates a CSS Error: Unknown pseudo-class or pseudo-element 'gt'. Although the code works as ...

jquerycss

Unable to alter Mui input label color upon focus using theme.ts

In my next.js app, I'm facing an issue with changing the color of the label in a Material UI input field using Mui. Despite updating the theme.ts file to change the border bottom color and label color, only the border bottom color is being applied. T ...

javascriptcsstypescriptmaterial-uiemotion

Employ JQuery and Ajax to develop an autocomplete/suggestion feature that generates a list based on JSON data fetched from an API via PHP

I'm facing challenges in developing a dynamic auto-suggest feature for a search field using JQuery with data in JSON format. The JSON data is fetched from an API through PHP. The objective is to have the auto-suggest list update with each keystroke e ...

phpjqueryhtmljsonajax

What is the best way to display a page within a div without having it covered by the header and footer elements?

Currently working on customizing a WordPress website. Within my main document, I have the code set up for the header and footer, with a div in between for displaying content. My goal is to have the ability to show content from navigation links clicked wi ...

htmlcsswordpress

Could use some assistance in developing a custom jQuery code

Assistance Needed with jQuery Script Creation <div>Base List</div> <div id="baseSection"> <ul class="selectable"> <li id="a">1</li> <li id="b">2</li> <li id="c">3</li> ...

javascripthtmljquery

What are the style attributes that can be edited in each ant design component?

My goal is to customize an ant design card by adding a border only on the left and right sides of the card. The bordered attribute in the card component seems to either remove the entire border or display it on all sides. I am looking for a way to specif ...

cssreactjsweb-componentantd

Modify the content and display of a stationary div based on vertical positions

I am interested in creating a vertical website that features multiple divs appearing at specific y-points on the page. These divs will contain text and will always be positioned fixed at 20% from the left and about 250px from the top. My goal is to have t ...

javascripthtmltransition

Data bindings encapsulated within nested curly braces

I am currently utilizing Angular2 in my application. Within my html file, I have a *ngFor loop set up like so: <div *ngFor="let element of array"> {{element.id}} </div> Next, I have an array containing objects structured as follows: some ...

htmlangulardata-binding

Ways to have the right sidebar seamlessly blend in with the page content by hovering over it rather than occupying a separate area

While working on the design of my website, I encountered a challenge with the sidebar. I aim to have a sidebar that hovers from the right side to the left, displaying the full content when the cursor is placed over it, much like the one featured on . Altho ...

htmlcsslaraveltwitter-bootstrap

Different ways to adjust the height of the date picker in Material UI

I am attempting to customize the mui date picker, but I am facing issues with applying CSS styles to it. I have tried using both inline styles and external styling by assigning classes, but nothing seems to work. I specifically want to adjust its height. ...

cssreactjsmaterial-ui

Is there a way to capture the input from the text box and store it in the local storage?

I'm confused about why the data entered into the input box is not being saved to local storage. <body> <input id="name"> <button onclick="bob()"> save </button> </body> <script> const user = document.getElementByI ...

javascripthtml

Generate unique div elements randomly using jQuery and Javascript to populate a container

My website has a section that spans 100% width and is 450 pixels tall. This is the HTML structure... <section class="interactive-banner"> <figure></figure> </section> I am aiming for each 'figure' element to be 150 ...

javascriptjqueryhtml

Why won't the jQuery function trigger when I click, but only responds when I move the cursor?

I am currently working on a website that includes a basic CSS style switcher. The function responsible for handling the theme button clicks is shown below: <script> $(function() { $(".light").click(function(){ $("link").attr("href", ...

javascriptjqueryhtmlcssfunction