Добавлены скошенные углы, но тень блока перетекает в углы. ⇐ CSS

[Anonymous]

Я пытаюсь добавить обрезанные углы к основному элементу моего CSS, и у меня все заработало. Однако я использую box-shadow для элементов внутри основного элемента и достаточно большие тени возле углов, обрезающие вне основного элемента, только в углах. Вот пример того, что я имею в виду:


Это мой CSS:
main {
max-width: 610px;
margin: auto;
padding: 10px;
/* border-top: 1px solid var(--bg-1);
border-left: 1px solid var(--bg-1);
border-bottom: 1px solid var(--bg-2);
border-right: 1px solid var(--bg-2); */
/* border-radius: 20px; */
overflow: hidden;
margin-bottom: 10px;
position: relative;
}
main:before {
--p: 1;
--pixel: calc(var(--p) * 1px); /* don't change this */
--s: calc(var(--pixel) * 20); /* size of the cut. you can change the number on the right of the asterisk for a deeper or shallower cut */
content:"";
position:absolute;
inset:0;
z-index: -1;
background: linear-gradient(45deg,var(--bg-1),var(--bg-2));
--g1:#000 var(--pixel),#0000 0 calc(100% - var(--pixel)),#000 0;
--g2:#0000 calc(0.707*var(--s)),
#000 0 calc(0.707*var(--s) + var(--pixel)),
#0000 0 calc(100% - 0.707*var(--s) - var(--pixel)),
#000 0 calc(100% - 0.707*var(--s)),
#0000 0;
}
main, main::before {
-webkit-mask:
linear-gradient(45deg ,var(--g2)),
linear-gradient(-45deg,var(--g2)),
linear-gradient(90deg ,var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat,
linear-gradient(180deg,var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
mask:
linear-gradient(45deg ,var(--g2)),
linear-gradient(-45deg,var(--g2)),
linear-gradient(90deg ,var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat,
linear-gradient(180deg,var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
}

Спасибо!
Изменить. По многочисленным просьбам, это мое тело HTML:



* {
--dark-primary: #8bd5b5;
--dark-tertiary: #a6cce0;
--dark-on-tertiary: #093544;
--border: #68dbaf;
--light-on-primary-container: #00211699;
--dark-on-primary-container: #86f8ca;
--bg-1: #68dbaf;
--bg-2: #a6cce0;
}





[url=about:blank]archive[/url] / old websites






Подробнее здесь: https://stackoverflow.com/questions/788 ... he-corners