How to fix such a border?

Hello, there is a similar code.
https://codepen.io/anon/pen/jZPyMz
Need to green the picture was cut off at the border (gray block) and was like underneath.
June 8th 19 at 17:22
2 answers
June 8th 19 at 17:24
Solution
https://jsfiddle.net/f24ozu0z/

.second {
 position: relative;
 height: 300px;
 margin-top: -150px;
 background: radial-gradient(100% 50% at center top, transparent 49.8%, gray 50.2%);
 z-index: 2;
}

In gradient, you can play to poweranimator
June 8th 19 at 17:26
:after {
 z-index: 1;
}
throw the full code codepen.io for example - presley_Reynolds commented on June 8th 19 at 17:29
, https://codepen.io/anon/pen/jZPyMz like this - lamar.Cronin commented on June 8th 19 at 17:32

Find more questions by tags CSS