How to transparent element in element css

Question

Today I'm working on a project, but I've to subtract the element in a element, but how can you do that?

the green element should be subtracted. But how can you do that?

Thanks for advance.

Answer 1

Using some CSS magic you can create the shape you want:

 .container { width: 300px; height: 750px; position: relative; background-color: lightgray; }.phone { position: absolute; border-radius: 25px; width: 250px; height: 700px; left: 25px; top: 25px; background-color: black; }.screen-top { width: 250px; height: 40px; left: 45px; top: 45px; position: relative; overflow: hidden; border-radius: 30px 30px 0 0; }.screen-top:before { z-index: 1; content: ''; position: absolute; left: 15%; bottom: calc(100% - 30px); width: 70%; height: 100%; border-radius: 0 0 30px 30px; box-shadow: 0px 300px 0px 300px white; }.screen-bottom { position: absolute; top: 85px; left: 45px; width: 250px; height: 660px; border-radius: 0 0 30px 30px; background-color: white; }

 <div class="container"> <div class="phone"></div> <div class="screen-top"></div> <div class="screen-bottom"></div> <div class="screen-content"></div> </div>

Answer 2

if you can (at least approximately) get the dimensions of that part of the phone, you vould solve it with a bit of css:

body {
    background: goldenrod;
    height: 100vh /* optional */
} 

#map {
    position: relative; /* needed if #page != body */
    background: url(your/path/to/map);
    display: flex;
    justify-content: center; /* center the green elem horizontally */
    height: 100vh; /* optional */
}
#box {
   background: goldenrod; /* (color of page bg, so we hack transparency) */
   position: fixed; /* or absolute, as you need */
   top: 0; 
   width: 200px ; /* that phone part s width */
   height: 30px ; /* same workaround */
   border-bottom-left-radius: 30px;
   border-bottom-right-radius: 30px; /* the magic, complete with actual radius of phone part corner */
}

it should keep good for this code:

<body>
    <div id=map>
        <div id=box></div>
    </div>
</body>

adding border-radius: 30px; on #page gives it the "phone" aspect

Hope it helped:)

How to transparent element in element css

Question

2 answers

solution1
2 ACCPTED 2020-04-08 11:01:26

solution2
0 2020-04-08 11:12:04

How to transparent element in element css

Question

2 answers

solution1 2 ACCPTED 2020-04-08 11:01:26

solution2 0 2020-04-08 11:12:04

solution1
2 ACCPTED 2020-04-08 11:01:26

solution2
0 2020-04-08 11:12:04