0

2 slanted divs side-by-side

Please help in making 2 divs side-by-side (50% each) that covers the entire width of the page and that the middle is slanted/skewed (please see attached photo). I have seen a few examples of skewed divs and have had no luck trying to make it work for my needs - especially when changing the size of the browser window.

Thanks in advance for all your help.

    .slantContainer{
        display:flex;
        flex-flow:row;
        height: 300px;
    }
    .slantedShare{
        background-color: #6179ff;
        color: white;
        position: relative;
        width:100%;
        padding: 10px 30px 10px 10px;
    }
    .slantedShare::after {
        background: #6179ff;
        content: " ";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -2;
        transform-origin: bottom left;
        -ms-transform: skew(-10deg, 0deg);
        -webkit-transform: skew(-10deg, 0deg);
        transform: skew(-10deg, 0deg);
    }

    .slantedDonate{
        background-color: #7b24f1;
        color: white;
        position: relative;
        width:100%;
        padding: 10px 30px 10px 10px;
    }
    .slantedDonate::after{
        background: #7b24f1;
        content: " ";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        transform-origin: top left;
        -ms-transform: skew(-10deg, 0deg);
        -webkit-transform: skew(-10deg, 0deg);
        transform: skew(-10deg, 0deg);
    }
<div>
      <div class="slantContainer">
          <div class="slantedShare">
              container for left div
          </div>
          <div class="slantedDonate">
              container for right div
          </div>
      </div>
</div>


<table style="width:100%;">
    <tr style="width:100%;">
        <td style="width:50%;">
            <div class="slantedShare">
                Left Div inside Table
            </div>
        </td>
        <td style="width:50%;">
            <div class="slantedDonate">
                right div inside table
            </div>
        </td>
    </tr>
</table>
Ball Jack
  • 49
  • 5

2 Answers2

0

If you play with the z-index it works

    .slantContainer{
        display:flex;
        flex-flow:row;
        height: 300px;
    }
    .slantedShare{
        background-color: #6179ff;
        color: white;
        position: relative;
        width:100%;
        padding: 10px 30px 10px 10px;
    }
    .slantedShare::after {
        background: #6179ff;
        content: " ";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -2;
        transform-origin: bottom left;
        -ms-transform: skew(-10deg, 0deg);
        -webkit-transform: skew(-10deg, 0deg);
        transform: skew(-10deg, 0deg);
    }

    .slantedDonate{
        background-color: #7b24f1;
        color: white;
        position: relative;
        width:100%;
        padding: 10px 30px 10px 10px;
        z-index: 1;
    }
    .slantedDonate::before {
        background: #7b24f1;
        content: " ";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        transform-origin: top left;
        -ms-transform: skew(-10deg, 0deg);
        -webkit-transform: skew(-10deg, 0deg);
        transform: skew(-10deg, 0deg);
    }
<div>
      <div class="slantContainer">
          <div class="slantedShare">
              container for left div
          </div>
          <div class="slantedDonate">
              container for right div
          </div>
      </div>
</div>


<table style="width:100%;">
    <tr style="width:100%;">
        <td style="width:50%;">
            <div class="slantedShare">
                Left Div inside Table
            </div>
        </td>
        <td style="width:50%;">
            <div class="slantedDonate">
                right div inside table
            </div>
        </td>
    </tr>
</table>
Shahar
  • 2,269
  • 1
  • 27
  • 34
-1

This can be done with a single div:

.slnt {
  width: 50%;
  min-width: 60vh;
  height: calc(50vh / 2);
  min-height: 20vw;
  background-color: dodgerblue;
}

.slnt::before,
.slnt::after {
  content: "";
  display: inline-block;
  height: 100%;
}

.slnt::before {
  background-color: dodgerblue;
  transform: skew(-20deg);
  margin-right: -30px;
  position: relative;
  left: 8%;
  width: 40%;
  z-index: 1;
}

.slnt::after {
  background-color: indigo;
  width: 60%;  
  position:relative;
  right: -31px;
}
<div class="slnt"></div>
symlink
  • 11,984
  • 7
  • 29
  • 50