[![2 slanted divs side-by-side](https://i.stack.imgur.com/nttmF.png)](https://i.stack.imgur.com/nttmF.png)

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.

```css
    .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);
    }
```

```html
<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>
```