Solução 1 - elemento position

by Yure Pereira

HTML

<section class="photo-header">
  <div class="photo-heade-body">
    <h1 class="title-header">
      Fechar acordos nunca foi tão <b>Simples</b>
    </h1>
  </div>
  <div class="find-case">
    <a href=""></a>
    <h2 class="find-case-title"> <b>Encontre o seu caso</b></h2>
    <h3>
    Você possui algum conflito em negociação? Crie ou acesse a sua conta, e acesse o nosso sistema:
    </h3>
    <button class="button-white"><b>Entrar</b></button>
    <button class="button-purple"><b>Cadastrar</b></button>
  </div>
</section>

CSS

.photo-header {
  width: 100%;
  height: 624px;
}

.photo-header .photo-heade-body {
  margin: 0 auto;
  padding: 4%;
  width: 100%;
  height: 624px;
  background: url('../assets/img/bg-head.png');
  clip-path: polygon(0 0, 100% 0%, 100% 400px, 0% 100%);
  z-index: 2;
  display: flex;
  margin-bottom: 80px;
  z-index:1;
  clear: both;
  
   background-color: #ddd;/* remover isso, coloquei só para visualizar a div */
}
.find-case {
  background-color: pink;
  margin-top: 162px;
  margin-left: 7%;
  border-radius: 6px;
  box-shadow: 0 4px 24px 0 rgba(37, 38, 94, 0.12);
  width: 39%;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5%;
  
  position: absolute;
  right: 0;
  top: 0;
}