<div class="container">
  <div class="element element-1"></div>
  <div class="element element-2"></div>
  <div class="element element-3"></div>
  <div class="element element-4"></div>
  <div class="element element-5"></div>
  <div class="element element-6"></div>
  <div class="element element-7"></div>
</div>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(240, 185, 171);
}

.container {
    margin: 0 auto;

    display: grid;
    background-color: #fff;
    grid-template-columns: repeat(10, 100px);
    grid-template-rows: repeat(10, 40px);
    padding: 10px;
    gap: 10px;
}

.element {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.element-1 {
    background-image: url("https://live.staticflickr.com/65535/49284804997_7073110349_c.jpg");

    grid-column: 1/7;
    grid-row: 1/5;
}

.element-2 {
    background-image: url("https://live.staticflickr.com/65535/49286724043_0c28090807_c.jpg");

    grid-column: 7/11;
    grid-row: 1/7;

    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        110px 100%,
        110px 240px,
        0 240px
    );
}

.element-3 {
    background-image: url("https://live.staticflickr.com/65535/49285789627_5e67e1a75b_c.jpg");

    grid-column: 1/3;
    grid-row: 5/9;
}

.element-4 {
    background-image: url("https://live.staticflickr.com/65535/49284362691_7bd306ebba_c.jpg");

    grid-column: 3/5;
    grid-row: 5/7;
}

.element-5 {
    background-image: url("https://live.staticflickr.com/65535/49284860621_826433406c_c.jpg");

    grid-column: 5/9;
    grid-row: 5/8;

    clip-path: polygon(
        0 0,
        210px 0,
        210px 50px,
        320px 50px,
        320px 100px,
        100% 100px,
        100% 100%,
        0 100%
    );
}

.element-6 {
    background-image: url("https://live.staticflickr.com/65535/49287296988_10528a4627_c.jpg");

    grid-column: 1/5;
    grid-row: 7/11;

    clip-path: polygon(
        0 100px,
        220px 100px,
        220px 0,
        100% 0,
        100% 140px,
        320px 140px,
        320px 100%,
        0 100%
    );
}

.element-7 {
    background-image: url("https://live.staticflickr.com/65535/49286265913_ea40a8dd42_c.jpg");

    grid-column: 4/11;
    grid-row: 7/11;

    clip-path: polygon(
        0 150px,
        110px 150px,
        110px 50px,
        550px 50px,
        550px 0,
        100% 0,
        100% 100%,
        0 100%        
    );
}