중간에서 div의 아래쪽에 상자 그림자 추가

Question

나는 내가 원했던 것을 미리 보았습니다. 나는 정직하게 그것을위한 적당한 단어를 얻을 수 없었다. 그래서 나는 이것을하는 방법을 찾고있는 행운이 없다.

고마워요.

Answer 1

나는 바닥에 제공 한 이미지를 사용했습니다. 다른 방법이 있는지 확실하지 않은 경우

Answer 2

의사 요소를 사용하여 타원형 모양을 만들고 상자 그림자를 지정할 수 있습니다. box-shadow 및 height 값으로 재생하여 원하는 것을 정확하게 얻을 수 있습니다.

div { 
    width: 300px; 
    height: 300px; 
    background-color: #FFF; 
    position: relative; 
} 

div:after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 30px; 
    border-radius: 50%; 
    z-index: -1; 
    box-shadow: 0 8px 10px -10px rgba(0, 0, 0, 0.5); 
} 

https://jsfiddle.net/hkpy6eup/4/