Как изменить цвет тени блока на «размытие» перевернутых углов в CSS
Я сделал строку меню в форме буквы L с перевернутыми углами внутри следующим методом:Инвертированные углы, но проблема в том, что я не могу изменить цвет угла на размытие, потому что его цвет взят из box-shadow.
Мой вопрос: как я могу изменить его на color: none; blur: 20px, например, Rec3 и Rec4? Или есть какой-нибудь другой способ сделать строку меню в форме буквы L?
Это мой код
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>Я пытался создать SVG с помощью ИИ, но не знаю, как это сделать. AdobeIllus
Пожалуйста, прикрепите изображения фона и значков (их можно прикрепить онлайн), чтобы мы могли воспроизвести проблему и понять, в чем проблема.
@DavidThomas это угловой элемент (#top::before{box-shadow: 10px 10px 5px 100px gray;}), который должен вести себя как .rec3 и .rec4.
Я обновил фоновое изображение, значки имеют размер всего 60px 60px PNG, и это ни на что не влияет.
Значки img представляют собой файл PNG на моем компьютере, как я могу добавить его в вопрос? Нужно ли мне загрузить его куда-нибудь в Интернет, затем скопировать ссылку img и добавить ее в вопрос.
Ответы 1
Я вижу, что вас не волнуют «пересечения» в размытых блоках, поэтому вы можете применить mask + border-radius к элементу #top:
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>Это сработало, но этот метод создал обводку по кругу. Я добавляю синий цвет, чтобы было легче видеть .
Это сработало, когда я изменил 99% на 100%, спасибо
Опубликованный вами код на самом деле не воспроизводит вашу проблему. Не могли бы вы добавить достаточно контента (фоновое изображение, соответствующие значки...), чтобы мы могли воспроизвести проблему, а затем легко увидеть, что происходит?