CSS shape that must adjust dynamically

I'm currently stuck on a project and would appreciate some help.

The Current Layout:

Image on the left side

Image on the right side

Desired Layout:

New image on the left

New image on the right

Here's the challenge: The parallax images stretch across the screen, but the length of the paragraph in between can vary greatly. The diagonal shapes need to adjust accordingly.

Below is the HTML and CSS code I've been working on:

HTML:

<div class="clearfix bg lbg1">
        <div class="col-md-7 col-sm-7 col-xs-12 sideBox leftBox">
            <h1>
                Why Choose Us?
            </h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
            </p>
        </div>
    </div>
    <div class="clearfix bg rbg1">
        <div class="col-md-6 col-sm-6 col-xs-12 sideBox rightBox pull-right">
            <h1>
                What We Offer
            </h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
            </p>
        </div>
    </div>

CSS:

.lbg1{
    background-image: url('../images/left1.jpg');
}
.rbg1{
    background-image: url('../images/right1.jpg');
}
.lbg2{
    background-image: url('../images/left2.jpg');
}
.rbg2{
    background-image: url('../images/right2.jpg');
}
.bg{
    background-size: cover;
    height: 100%; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.leftBox{
    padding: 30px 30px 30px 100px;
}
.rightBox{
    padding: 30px 100px 30px 30px;
}
.sideBox{
    background-color: #fff;
}
.sideBox h1{
    font-weight: 900;
    margin-bottom: 30px;
}
.sideBox p{
    line-height: 2;
    font-size: 3rem;
    font-weight: 500;
}
.sideBox ul>li{
    line-height: 1.5;
    list-style: circle;
    margin-bottom: 15px;
    margin-left: 15px;
    font-size: 3rem;
    font-weight: 500;
}

Answer №1

If you want to achieve a polygonal clipping effect, consider utilizing the CSS property clip-path.

For instance:

-webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);

This method can create a parallelogram clip path on your elements.

You have the option to generate it yourself by visiting this link.

Answer №2

To achieve the desired positioning of paragraphs and images, it's recommended to utilize the CSS property FLOAT instead of relying on Padding. Properly applying and clearing float will help you accomplish this effectively. For further guidance, you can visit https://www.tutorialspoint.com/css/css_float_property.htm

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

Tips for highlighting the sticky subnav menu option as you scroll

Currently utilizing intersection observer to toggle the visibility of the sticky navbar and make the scroll bar sticky. I am now looking to add a feature where the sub nav options highlight with color as we scroll, focusing on the container with a specific ...

What is preventing my image from moving upwards?

I've been struggling to move this image up, despite trying several methods. I really want it to be aligned horizontally with the PV picture. I need the HP image to be moved directly upwards so that it aligns horizontally with the PV image. This is t ...

Collection of clickable images that lead to creatively designed individual pages

Being relatively new to JavaScript and jQuery, my knowledge is solid when it comes to HTML & CSS. Currently, I have a page with 20 minimized pictures (with plans to increase to 500+ images) that open into a new page when clicked. Although I have no issues ...

The JavaScript code in the HTML files is not functioning as expected

Upon form submission in my program, the form action directs to xyz.php. Within xyz.php, I simply use INCLUDE("abc.html") to redirect to another HTML page. The abc.html page contains HTML tags and JavaScript code, but after the form submission, the page red ...

What could be causing my external JavaScript file to not function properly upon loading my HTML file?

I have organized my code by separating the HTML and JavaScript portions. The JavaScript code is now in its own separate file and I use 'script' tags to reference it in the HTML file. Within the JavaScript code, I have two functions - one creates ...

An effective method for modifying the active class on an li element in jQuery and ensuring that the user is directed to the desired page upon clicking the li element

I am facing an issue with my script tag. When I click on the links test.php or test2.php, the active class changes from index.php to the respective file but I am not redirected to the clicked page. I have tried solutions from various sources but none of th ...

Align text vertically within labels and links styled with bootstrap

When using bootstrap button styled labels and links with a larger height than default, the text tends to be vertically aligned at the upper side of the button. However, when using an actual button element, the text is centered vertically. Is there a way t ...

Angular 6: A guide to dynamically highlighting navbar elements based on scroll position

I am currently building a single page using Angular 6. The page is quite basic, and my goal is to emphasize the navbar based on scrolling. Below is the code snippet I am working with: .sticky { position: sticky; top: 0; } #i ul { list-style-type: ...

Ways to add margin-top to a card element without affecting the entire container-fluid

I'm attempting to change the background image of this container, but when I add margin-top to the card element, it shifts everything over the picture. Below is my Bootstrap4 code: #card.container-fluid { background-image: url("../images/picture2. ...

What is the best way to implement a shared function across two classes?

I have a jQuery code that works as intended with the .foto class. Now, I need to add the .fotoleft class to perform the same function. How can I make the function work for two different classes? $(document).ready(function() { $(".foto").click(functi ...

Restrict certain sections of the website to authorized users only

In my game project, players are presented with two options: to play the game itself or to view global and local highscores. I have implemented a signup and login system where upon successful login, users can choose among playing the game, checking highscor ...

Apply CSS styles to a group of elements retrieved from an object

How can I apply CSS properties to each element in a collection using jQuery? const cssProperties = { "color": "#555555", "font-weight": "bold", "text-align": "left" }; const $tdCollection = $("tr:first-child").find("td:nth-child(2)"); // Co ...

Limit the scope of addClass() to immediate children and not descendants

Looking at the code below: <div class="menu"> <a href="#" class="dropdown-item">Link 1</a> <a href="#" class="dropdown-item">Link 2</a> <ul class="hamburgerMenu__menu--levelTwo"> <li><a href="#" ...

The Elusive Solution: Why jQuery's .css() Method Fails

I am currently facing an issue with my code that utilizes the jQuery .css() method to modify the style of a specific DIV. Unfortunately, this approach does not work as expected. To illustrate the problem, I have provided a simplified version of my code bel ...

Creating a tooltip that doesn't rely on any child elements

I've been experimenting with creating a tooltip that appears when hovering over an <a> tag and displays a <div> from another location For example: <p> blah blah <a class="tooltiphover">hover me</a> blah blah &l ...

Troubleshooting flow problems in flexbox container for

https://i.stack.imgur.com/ZpVaH.png I have implemented a flexbox-based page layout. The layout consists of two sidebars on the left and right sides, with fixed widths, and a central content panel that dynamically adjusts to fill the remaining space. Howe ...

What is the best method for placing a single character from a user's quote into a table?

this is an example of some HTML code <section class="insertionCitation"> <label>Quote:</label> <input #quote (keyUp.Enter)='validateQuote(quote.value)'> </section> `- how can I display one letter ...

Scrolling with jQuery to create a fixed navigation bar

I'm having an issue with my navbar on my website. I used CSS and jQuery to keep it fixed at the top, but now when I click on a menu item, it doesn't scroll to that section of the page. Can anyone help me troubleshoot this problem? ...

Progressing through the Material UI LinearProgress bar in steps

How can I split a progress bar into more steps to achieve a design like this? https://i.stack.imgur.com/lRMj6.png I attempted using this code but couldn't find an option for splitting: <LinearProgress variant="determinate" classes={{ ...

Combining the container and container-fluid classes with Bootstrap for versatile layout design

My goal is to have my website display with a fixed width on xs, sm, and md screens, but be fluid on lg screens. After researching the Bootstrap grid system, I discovered that I can use the .container class for fixed width layouts or the .container-fluid ...