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

.center{
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.obdelnik{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: red;
    z-index: 2;
    transform: scale(1);
    transition: 0.5s;
}
.obdelnik:hover{
    transform: scale(1.05);
}
.vlevo{
    width: 300px;
    height: 300px;
    position: absolute;
    background-color: aqua;
    border: 1px solid red;
    clip-path: polygon(0 100%, 100% 0, 100% 0, 0 0, 0 100%);
    z-index: 4;
    transition: 0ms z-index 1s, 0.8s ease clip-path 0ms;
}
.vpravo{
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid red;
    background-color: yellow;
    clip-path: polygon(100% 100%, 100% 0, 100% 0, 0 100%, 0 100%);
    z-index: 3;
    transition: 0ms z-index 0.5s, 0.8s ease clip-path 0ms;

}
.vlevo:hover{
    z-index: 4;
    clip-path: polygon(70% 100%, 100% 70%, 100% 0, 0 0, 0 100%);
    transition: 0ms z-index 0ms, 0.8s ease clip-path .5s;
}
.vpravo:hover{
    z-index: 5;
    clip-path: polygon(100% 100%, 100% 0, 30% 0, 0 30%, 0 100%);
    transition: 0ms z-index 0.5s, 0.8s ease clip-path .5s;
}