Transparent window with a completely transparent notch

Hello, i want to make a transparent window with a notch that is completely transparent. But probably i’m doing it incorrectly can anyone assist me with this ?

html :

<table width="100%" cellspacing="0" cellpadding="0"
                border="0" align="center">
                    <td valign="top">
                      <div class="clear"><div class="line"></div></div>

css :

  background: rgba(255, 255, 255, 0.7);
background: White;
border-bottom-left-radius: 3vh;
border-bottom-right-radius: 3vh;
height: 3vh;
width: 50%;
margin-left: 25%;

What i got now

Basically i want to make that notch completely transparent to the background how can i make this happen ?

Is the white area the “notch” you are referring to?

Not the same look. but this topic reminded me of this older topic

The goal in the topic was to get a look like this

Maybe some of the solutions offered in the topic could help with this one?

1 Like


You can’t actually punch a hole in a background as that is impossible. What you have to do is place elements outside of the transparent section and make them semi-transparent while leaving the original untouched and not overlapped.

One way to simplify this is to use box-shadow and make that spread out from the element until a whole outside section is coloured by the box-shadow thus leaving the inner section untouched.

It’s a bit magic-numberish because you cannot have a box-shadow that is wider than the element itself or the shadow moves away from the element and spoils the effect.

Here is a codepen showing the technique in action.

Another way to accomplish what you wanted would be to place the left and right top sections absolutely above the box thus leaving the inner section untouched.

Of course all these methods depend on what you expect to happen next and how this will be used.

Here’s a similar one that doesn’t need media queries but needs a little extra html.

You can make holes in the background using circular linear gradients but is similar to the technique with box-shadow in that you colour outside the circle. However its more awkward to get right than the methods shown above.

Hi there markokk888

and a warm welcome to these forums.

This project really needs an image to solve the problem.

Check out the attachment, to see a possible solution. (5.4 KB)

Also note that tables are no longer used for page layouts



Well thanks it kinda works but what if i want to have a border around that ? following down the notch but not going above it. then what ? also why not use tables ? this way much simpler why tables ar no longer used and what do you recommend instead of that ?

Hi there markokk888,

check out the attachment. (4.9 KB)

Table layouts have been deprecated since the late twentieth century.

Layouts should be made with the correct semantic elements for the purpose.

Further reading :-

What’s Wrong with YOUR Website?



Yeah that is what i’m looking for thank you! But what i can do if i want to make the border white also same for the background but instead background will have opacity and the border will not. what do you will recommend then ?

As you keep moving the goalposts, I would recommend that
you use an image edtor - I used “PhotoShop” - and then
learn and practice the creation of images to meet your ever
changing requirements. :winky:



Thank you for your time :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.