Adding a pair of labelled angled columns in a container that spans the full width is a breeze

Question

Adding a pair of labelled angled columns in a container that spans the full width is a breeze

I'm in pursuit of this: https://i.sstatic.net/HYbC1.jpg

What I currently possess is:

<div class="row slantrow">
    <div class="row slant-inner">
        <div class="col-md-6 slant-left">
            <p>text</p>
        </div>
        <div class="col-md-6 slant-right">
            <p>text in another div</p>
        </div>
    </div>
</div>

Along with some CSS:

.slant-left {

}
.slant-right {
    background-color: antiquewhite;
}
.slantrow {
    background-color: bisque;
}
.slant-inner {
    width: 1100px;
    margin: 0 auto;
}

I am aiming to make DIV1 (60% of the width) and DIV2 (40% of the width) together fill the width of the page content.

Challenges at hand:

Implementing a slanted border for DIV2
Extending the background color of DIV2 beyond its parent container

What would be the best approach to achieve the desired appearance shown in the image?

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

If you're looking to achieve this effect without worrying about IE support, you can use CSS clip-path.

.slantrow {
    position: relative;
    background-color: bisque;
}
.slant-inner {
}
.slant-left {
    width: 60%;
}
.slant-right {
    width: 40%;
    /*background-color: antiquewhite;*/
}

.slant {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* Play with `left` here */
    /* Used -15px, as the default gutter with in BS is 30px, you can adjust this based on your setup */
    left: calc(50% - 15px);
    background-color: antiquewhite;

    /* Play with `calc()` here */
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(0% + 15px) 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(0% + 15px) 100%);
}

<div class="slantrow">
    <div class="slant"></div>

    <div class="container slant-inner">
        <div class="row">
            <div class="col-6 slant-left">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum lectus, lacinia sed facilisis vel, euismod at quam. Pellentesque in urna dui. Duis ut elit id erat interdum tempor. Nam at lectus sit amet dolor interdum cursus a non enim.</p>
            </div>

            <div class="col-6 slant-right">
                <p>Morbi et pretium ex. Ut eros sapien, tincidunt et tincidunt eu, semper in libero. Nunc luctus ornare massa ut porta.</p>
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

Answer 2

If you're looking to achieve this effect without worrying about IE support, you can use CSS clip-path.

.slantrow {
    position: relative;
    background-color: bisque;
}
.slant-inner {
}
.slant-left {
    width: 60%;
}
.slant-right {
    width: 40%;
    /*background-color: antiquewhite;*/
}

.slant {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* Play with `left` here */
    /* Used -15px, as the default gutter with in BS is 30px, you can adjust this based on your setup */
    left: calc(50% - 15px);
    background-color: antiquewhite;

    /* Play with `calc()` here */
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(0% + 15px) 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(0% + 15px) 100%);
}

<div class="slantrow">
    <div class="slant"></div>

    <div class="container slant-inner">
        <div class="row">
            <div class="col-6 slant-left">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum lectus, lacinia sed facilisis vel, euismod at quam. Pellentesque in urna dui. Duis ut elit id erat interdum tempor. Nam at lectus sit amet dolor interdum cursus a non enim.</p>
            </div>

            <div class="col-6 slant-right">
                <p>Morbi et pretium ex. Ut eros sapien, tincidunt et tincidunt eu, semper in libero. Nunc luctus ornare massa ut porta.</p>
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

Answer 3

Answer №2

Insert an additional div called slant-middle between slant-left and slant-right, ensuring it has the same background color as slant-left. Rotate this div to a 45-degree angle.

transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);

Answer 4

Insert an additional div called slant-middle between slant-left and slant-right, ensuring it has the same background color as slant-left. Rotate this div to a 45-degree angle.

transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);

Answer 5

Answer №3

To achieve this desired outcome, a pseudo-element can be utilized. Refer to the code snippet below (view full page for a more precise representation):

* { box-sizing: border-box; }

.slantrow {
  background-color: bisque;
}

.slant-inner {
  display: flex;
  width: 1100px;
  margin: 0 auto;
}

.slant-inner p { position: relative; } /* To prevent text overlap with slanted box */

.slant-left {
  width: 60%;
  padding-right: 5%;
}
.slant-right {
  position: relative;
  width: 40%;
  padding-left: 5%;
  background-color: antiquewhite;
}
.slant-right::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  transform-origin: bottom left;
  transform: skewX(10deg);
}

<div class="row slantrow">
    <div class="row slant-inner">
        <div class="col-md-6 slant-left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et augue at ipsum semper auctor a ut ante. Vivamus lacinia mollis semper. Aliquam fringilla eros at tortor semper, eget finibus urna tincidunt. Nulla mollis vestibulum elit vitae element...nibh laoreet, egestas velit id, ultrices arcu. Curabitur eget iaculis orci. </p>
        </div>
        <div class="col-md-6 slant-right">
            <p>Aenean varius sollicitudin nulla. Proin in nisi urna. Aliquam ullamcorper dui vitae augue fringilla cursus vel finibus justo. Nullam tortor urna, rutrum et vulputate congue, consequat vitae nunc. Integer sit amet nibh blandit, venenatis velit u...mus quis leo eu quam sagittis egestas vel at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        </div>
    </div>
</div>

Answer 6

To achieve this desired outcome, a pseudo-element can be utilized. Refer to the code snippet below (view full page for a more precise representation):

* { box-sizing: border-box; }

.slantrow {
  background-color: bisque;
}

.slant-inner {
  display: flex;
  width: 1100px;
  margin: 0 auto;
}

.slant-inner p { position: relative; } /* To prevent text overlap with slanted box */

.slant-left {
  width: 60%;
  padding-right: 5%;
}
.slant-right {
  position: relative;
  width: 40%;
  padding-left: 5%;
  background-color: antiquewhite;
}
.slant-right::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  transform-origin: bottom left;
  transform: skewX(10deg);
}

<div class="row slantrow">
    <div class="row slant-inner">
        <div class="col-md-6 slant-left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et augue at ipsum semper auctor a ut ante. Vivamus lacinia mollis semper. Aliquam fringilla eros at tortor semper, eget finibus urna tincidunt. Nulla mollis vestibulum elit vitae element...nibh laoreet, egestas velit id, ultrices arcu. Curabitur eget iaculis orci. </p>
        </div>
        <div class="col-md-6 slant-right">
            <p>Aenean varius sollicitudin nulla. Proin in nisi urna. Aliquam ullamcorper dui vitae augue fringilla cursus vel finibus justo. Nullam tortor urna, rutrum et vulputate congue, consequat vitae nunc. Integer sit amet nibh blandit, venenatis velit u...mus quis leo eu quam sagittis egestas vel at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        </div>
    </div>
</div>

Adding a pair of labelled angled columns in a container that spans the full width is a breeze

Answer №1

Answer №2

Answer №3

Similar questions

How can we parse the returned 'data' as HTML in JavaScript/jQuery to select more elements?

Is It Possible to Use Separate Stylesheets for Different Web Browsers?

Ensure that the HTML input element only accepts positive values, including decimal numbers

Enhance the aesthetics of material-ui tooltips by utilizing @emotion/styled

Is it possible to modify the underline color while using the transition property in CSS?

Problem occurs when tab links vanish after clicking on another part of the website

The Jqueryui image link is not displaying the image despite no error being reported

Difficulties encountered while attempting to modify a class using Javascript

Having trouble with the filtering feature in Material UI Datagrid

Alert Box Displays Variable Name Instead of Label Name in Form Validation - MM_validateForm()

Is it possible to make one <td> tag bold in a table if the <tr> contains two <td> tags?

Creating a well-aligned form using Material-UI

What is the best way to dynamically adjust the size of a Google map on my website automatically

"Creating Eye-Catching CSS Animation Effects with Dynamic Initial States

Tips for displaying only one image when clicked and hiding other divs:

OutOfMemoryError caused by Bitmap

Adjusting the image placement within a modal window (using bootstrap 3)

Angular.js, require.js, and jQuery Plugin all combined to create a uniquely customized directive

Best practices for personalizing components installed with Bower

Loading and refreshing iframe content in real-time using JQuery on change() and keyup() events