I am looking to build a container to put some content in. I want to have a little text for the "notch" or the "tab" in the top.
I tried building the same thing with pseudo elements but found it to be very difficult because of the image that I want to mask. Another problem I found with pseudo-elements and specifically is that its hard to achieve if your background is anything else than a solid color.
This is the code I used to achieve the effect. I am wondering if there is a better responsive way of building this? What if I want the notch to be responsive to the size of the text I want to put there?
body {
background: #F7EAE2;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
height: 100vh;
font-family: montserrat;
}
.masking {
display: flex;
justify-content: center;
align-items: center;
width: 700px;
height: 400px;
background: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg);
background-size: cover;
clip-path: url(#mask);
mask-size: 100%;
}
p {
font-size: 30px;
color: white;
}<body>
<div class="masking">
<p>Is there a better way?</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<clipPath id="mask" clipPathUnits="objectBoundingBox">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0,0.098 C0,0.086,0.005,0.077,0.012,0.077 H0.068 C0.075,0.077,0.081,0.068,0.081,0.057 V0.021 C0.081,0.009,0.086,0,0.093,0 H0.223 C0.23,0,0.235,0.009,0.235,0.021 V0.057 C0.235,0.068,0.241,0.077,0.247,0.077 H0.988 C0.995,0.077,1,0.086,1,0.098 V0.979 C1,0.991,0.995,1,0.988,1 H0.012 C0.005,1,0,0.991,0,0.979 V0.098"/>
</clipPath>
</defs>
</svg>
</body>