Dividing Trapezoid Shapes, Cropping Background Images

I am attempting to design a website layout with trapezoid shapes similar to the attached image. Each section should have a background image that fills the background with cover or a similar effect.

I successfully created the first section (dark blue) using skew and two divs, as shown below.

However, I am facing difficulty in creating the next section where it skews in two directions. I tried using clip-path without success. Lastly, the final section needs to return to a squared-off shape.

HTML

<section id="my_section">
        <div id="my_section_bg"></div>
        <div id="my_section_content">
            <!-- any typical content, text/images here -->
        </div>
    </section>

CSS

#my_section {
    padding-top: 80px;
    padding-bottom: 90px;

    background-color: rgba(74,90,119,.5);

    transform: skewY(-4deg);
}

#my_section_bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(
        to bottom,
        rgba(29,44,71,.85) 0%,
        rgba(29,44,71,1) 100%
        ), url("./assets/my_bg_img.jpeg");
    background-color: rgba(29,44,71,1);

    transform: skewY(8deg);
}

#my_section_content {
    transform: skewY(4deg);
}

https://i.stack.imgur.com/Xe5ab.png

htmlcssbackground-imagecss-transformsclip-path

Answer №1

To achieve this effect, you can hide a portion of the second angled section underneath the first one. The same concept applies to the last section:

Here is a simple example:

.box {
  min-height:250px;
  position:relative;
  overflow:hidden;
  transform-origin:left; /*this will create the effect*/
  max-width:1000px;
  margin:auto;
}
.box:before {
  content:"";
  position:absolute;
  top:-100px;
  left:0;
  right:0;
  bottom:-100px;
  transform-origin:left;
  background:var(--img,red) center/cover;
}

.first {
  transform:skewY(5deg);
  z-index:2;
  --img:url(https://picsum.photos/800/600?image=0)
}
.first:before {
  transform:skewY(-5deg);
}

.second {
  transform:skewY(-5deg);
  z-index:1;
  --img:url(https://picsum.photos/800/600?image=1069)
}
.second:before {
  transform:skewY(5deg);
}

.last {
  --img:url(https://picsum.photos/800/600?image=1053);
  margin-top:-100px;
}
<div class="first box">

</div>
<div class="second box">

</div>

<div class="last box">

</div>

Alternatively, using clip-path, you can achieve the following (adjust the 50px values to change the angles)

.box {
  min-height:250px;
  position:relative;
  overflow:hidden;
  max-width:1000px;
  margin:auto;
}
.first {
  clip-path:polygon(0 0,100% 50px, 100% 100%,0 100%);
  background:url(https://picsum.photos/800/600?image=0) center/cover;
}

.second {  
  clip-path:polygon(0 50px,100% 0, 100% 100%,0 calc(100% - 50px));
  z-index:1;
  margin:-50px auto;
  background:url(https://picsum.photos/800/600?image=1069) center/cover;
}

.last {
  background:url(https://picsum.photos/800/600?image=1053) center/cover;
}
<div class="first box">
</div>
<div class="second box">
</div>
<div class="last box">
</div>

Answer №2

Currently, I'm working on a project that bears some resemblance to this one, so I thought I'd give it a shot. It seems like overlapping and skewing two containers could potentially be the solution depending on the requirements.

However, if the top and bottom need to be skewed at different angles, that approach may not work. In that case, utilizing Pseudo elements with absolute positioning and employing CSS clip-path might be your best bet. I personally used this tool to generate clip paths effortlessly.

I've chosen this method in order to prevent clipping the content of each section, although this distinction may not be significant in your particular scenario.

.container {
  width: 80vw;
  margin: 0 auto;
  overflow: hidden;
}

section {
  min-height: 40vh;
  position: relative;
  padding: 2rem;
}

.sec1 {
  background-color: #FFFFFF;
}

.sec2 {
  background: #01579B;
}
(sec2 styles)

<div class="container">
<section class="sec1">Section 1 Content</section>
<section class="sec2">
<span class="decor">
<!-- additional element necessary -->
</span>
Section 2 Content
</section>
(Demo continues...)
</div>

The only downside I can foresee is if you require an image background. In such instances, utilizing a complex polygon as the mask for the entire section may be more suitable.

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

The battle between HTML5's async attribute and JS's async property

What sets apart the Html5 async attribute from the JS async property? <script src="http://www.google-analytics.com/ga.js" async> versus (function() { var ga = document.createElement('script'); ga.type = 'text/javascript&apo ...

javascripthtml

I struggle with managing a z-index in conjunction with an absolute position

Check out this codesandbox to see the issue where the 3 dots button is displayed over the menu. Click on the 3 dots to understand the problem. Below is the CSS code for the menu: .more-menu { position: absolute; top: 100%; z-index: 900; float: l ...

css

What is the best way to incorporate a variety of colors into a single element?

Using a combination of colors in one element I'm looking for ways to incorporate multiple colors into a single element effectively. My initial attempt with the color mix function didn't work as expected, so I need new ideas and techniques on how ...

htmlcsslinear-gradients

Enable contenteditable on table by pressing the tab key

I developed a table entry tool and I would like to be able to input items by pressing the tab key instead of having to manually click on each element. I haven't been able to figure out how to make this function work yet. $('table').on(&apos ...

javascriptjqueryhtml

Customize your Bootstrap tabs with a unique border design

I am currently working on a wizard project where the header design is inspired by the image below. I am utilizing Bootstrap-4 tabs components and the :after pseudo element method on the li element to achieve this effect. However, I am facing a challenge in ...

twitter-bootstrapcssbootstrap-4

Is it possible to have more than one button for each item on my Shopping List App?

I am developing a shopping list app that allows users to add items to a list. Each item added triggers the display of a button next to it, enabling users to remove the item from the list when needed. However, a problem arises as more items are added – i ...

javascriptjqueryhtmlcss

Testing the local transmission of form data via Javascript: A Step-by-Step guide

Currently studying how to send forms using JavaScript by manually creating an XMLHttpRequest. Towards the end of the provided example, there's a note: Note: If you want to send data to a third party website, keep in mind that this use of XMLHttpRequ ...

javascripthtmlformsxmlhttprequest

Disorganized jQuery Animation

Looking for some help with an animation I have on my website. The animation is supposed to smoothly move in and out when the mouse cursor hovers over it, but as you can see, it's a bit messy. This project involves HTML, CSS, and jQuery <!DOCTYPE ...

jquerycsshtmlanimation

Issues arise when using the "placeholder" attribute within a <p:inputText tag while the inputText is devoid of any value

A current project involves implementing JSF Mojarra 2.3.9.SP02 alongside PrimeFaces 7.0 on Wildfly 17 using the Sapphire template provided by PrimeFaces. However, I've encountered a significant issue with a specific <p:inputText element within my f ...

htmlcssjsfprimefaces

Leveraging jQuery chosen for interactive form elements

This Table Row contains 5 input fields, with the first being a select box. I am utilizing the chosen jQuery plugin to enable search functionality for the select items. Since this is a dynamic form, I am duplicating these rows. However, I am facing an issu ...

javascriptphpjqueryhtmllaravel

Elements that are added dynamically do not contain any space between each other

I have a markup template that looks like this. <template id="unsequenced-template"> <button type="button" class="btn btn-primary railcar"></button> </template> Then, I use the following JavaScript ...

javascripthtmljquerytwitter-bootstrapbootstrap-5

Incorporate Security Measures into the Form

I am in the process of setting up a form that requires users to enter a specific password provided by me. The user must input "Password123" into the form before they can submit it to my email. If the password is incorrect, the site will redirect to an erro ...

phphtmlforms

"The onkeydown event dynamically not triggering for children elements within a parent element that is contentEditable

Can anyone offer some insights into why this code isn't functioning as expected? My goal is to attach the listener to the children elements instead of the body so that I can later disable specific keystrokes, such as the return key. <!DOCTYPE html ...

javascripthtml

Change the button text without the need for a click, automatically switch

How can I make a button switch between 'click here' and 'download' every 2 seconds without requiring user interaction? The code I've tried so far is below, but it's not working as expected: <div class="assetClass customBut ...

jqueryhtml

Fixed and percentage widths in horizontal divs for children, with the percentage width exceeding the desired size

Here's the code snippet I'm working with: http://pastebin.com/W3ggtgZB. The body of this code can be found here: http://pastebin.com/2tkmhnfW. My goal is to create a div containing two child divs. One child div should have a fixed width, while t ...

htmlsizewidthpercentagechildren

Tips for launching different web browsers via hyperlinks?

My app has a link that I want mobile users from apps like LinkedIn to open in a browser such as Safari. I attempted this: <a href="safari-https://meed.audiencevideo.com">May open on Safari</a>' However, when I click the link, it opens i ...

javascripthtmllinkedin-api

What is the best method for combining multiple text box values into a single text box?

I need assistance with concatenating multiple text box values into one dynamic text box. I am currently retrieving values using IDs, which are dynamically added as the text boxes are dynamically created. However, when using a for loop to dynamically add te ...

javascripthtml

Tips for showcasing the complete image within v-parallax

For my project, I decided to go with vuetify as the frontend framework. It's a great choice! Now, I have a question about v-parallax - how can I make it display the full image without cropping? Below is some code snippet, and you can find the full cod ...

cssvue.jsvuetify.js

Display iframe as the initial content upon loading

Seeking solutions for loading an iframe using jQuery or Ajax and outputting the content to the page once it has been loaded. The challenge lies in loading an external page that may be slow or fail to load altogether, leading to undesired blank spaces on th ...

phpjavascriptjqueryhtmlajax

Graphical Interface for an HTTPAPI

After successfully building a REST API in Node.js using Express that includes queue functionalities, my next goal is to develop a web interface for this API. As a newcomer to JavaScript and Node.js, I would greatly appreciate any advice or guidance on ho ...

javascripthtmlnode.jsrest