Child element crops parent element?

Question

I dont know what title to give for this question. Got from my designer this image:

How can i make something like this? Like you see there is button in midle who needs to be clickable and background transparent. Around button you see red full width parent. Maybe my approach is not good maybe it can be done with pseudo elements but i dont know how. Pls help me...

This is my html code:

<div class="pdf">
    <div class="pdf-container">
        <h3>Rádi byste s námi spolupracovali? Představíme Vám své další výrobky v našem katalogu.</h3>
        <a href="#" class="pdfbutton"> stáhnout katalog</a>
    </div>
</div>

Answer 1

Support isn't fantastic, but mix-blend-mode is the easiest way to achieve your desired look.

.pdf {
  background: url('https://media.istockphoto.com/vectors/gear-wheel-vector-rendering-of-3d-wireframe-style-3d-view-layers-of-vector-id1003526726') 50% 10% no-repeat;
  text-align: center;
}

.nav {
  height: 60px;
  background-color: #313131;
  mix-blend-mode: multiply;
}

.pdf-container {
  padding: 30px;
  background-color: red;
  mix-blend-mode: multiply;
}

.pdfbutton{
  background: white;
  border-radius: 20px;
  display: inline-block;
  padding: 10px 20px;;
}

<div class="pdf">
  <div class="nav"></div>
  <div class="pdf-container">
    <h3>Rádi byste s námi spolupracovali? Představíme Vám své další výrobky v našem katalogu.</h3>
    <a href="#" class="pdfbutton"> stáhnout katalog</a>
  </div>
</div>