I made L shaped menu bar with inverted corners inside by this method:Inverted corners, but the problem is I cannot change the corner color to blur because its color is from box-shadow.
My question is how can I change it to color: none; blur: 20px
, like rec3 and rec4? Or is there any other way to make L shaped menu bar?
This is my code
body {
background-image: url(https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-repeat: no-repeat;
background-size: cover;
}
.rec3 {
/*Horizontal bar*/
position: fixed;
width: 60vw;
height: 80px;
backdrop-filter: blur(20px);
bottom: 20px;
left: 20px;
border-radius: 0 25px 25px 80px;
}
.rec4 {
/*Vertical bar*/
position: fixed;
width: 80px;
height: 60vh;
bottom: 90px;
left: 20px;
backdrop-filter: blur(20px);
border-radius: 25px 25px 0 0;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: hidden;
z-index: -1;
}
#top {
position: absolute;
height: 30px;
width: 30px;
left: 80px;
overflow: hidden;
}
#top {
top: -30px;
}
#top::before {
content: '';
position: absolute;
right: 0;
height: 200%;
width: 200%;
border-radius: 100%;
box-shadow: 10px 10px 5px 100px blue;
/*How can i change this color like rec3 and rec 4 bar*/
z-index: -1;
}
#top::before {
top: -100%;
right: -100%;
}
<div class="rec3">
<div id="top"></div>
</div>
<div class="rec4">
</div>
I tried to make an SVG with AI but I don't know how to do it. AdobeIllus
I see you don't care about the "intersections" in blurred blocks, so then you can apply mask
+ border-radius
to the #top
element:
body {
background-image: url(https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-repeat: no-repeat;
background-size: cover;
}
.rec3 {
/*Horizontal bar*/
position: fixed;
width: 60vw;
height: 80px;
backdrop-filter: blur(20px);
bottom: 20px;
left: 20px;
border-radius: 0 25px 25px 80px;
}
.rec4 {
/*Vertical bar*/
position: fixed;
width: 80px;
height: 60vh;
bottom: 90px;
left: 20px;
backdrop-filter: blur(20px);
border-radius: 25px 25px 0 0;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: hidden;
z-index: -1;
}
#top {
position: fixed;
height: 60px;
width: 60px;
left: 100px;
overflow: hidden;
bottom: 100px;
backdrop-filter: blur(20px);
mask: radial-gradient(30px, #0000 99%, #000);
border-radius: 50% 50% 50% 0;
}
<div class="rec3"></div>
<div class="rec4"></div>
<div id="top"></div>