CSS : Scalene Triangle의 상자 그림자 효과 PseudoElement

Question

아래와 같이 의사 요소로 존재하는 스켈레톤 삼각형 주위에 상자 그림자를 만들려고합니다. 나는 여러 가지 방법을 시도했지만 내 이미지 아래에 그림자가 생길 것 같지 않습니다.

회색으로 약간 큰 치수를 가진 두 번째 스켈레톤 삼각형 의사 요소를 넣으려고했지만 그래디언트 또는 그림자 효과가 없으므로 찾고자하는 것이 아닙니다.

아무도 해결책이 있습니까?

몇 가지 아이디어를 정말 고맙겠습니다. 아마도 두 번째 의사 요소에 테두리 그라디언트 효과를 적용하고이를 밑줄 수있는 방법이 있을까요? 당신이 찾고있는 무엇

.box { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: blue; 
 
    position: relative; 
 
    box-shadow: 0 40px 5px 0 rgba(0, 0, 0, 0.50); 
 
} 
 

 
.box:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 80px solid transparent; 
 
    border-top: 30px solid blue; 
 
}

<div style='width: 300px;height:300px;background: white;'> 
 
    <div class='box'> 
 
    </div> 
 
</div>

Answer 1

는 filter입니다!

filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); 

그림자가 상자 대신 표시됩니다.

이 속성은 Microsoft의 이전 "필터"속성과 크게 다르며 호환되지 않습니다.

Answer 2

내가 만든이 피들을 한번 볼 수 있습니다 : https://jsfiddle.net/1fwrn3wh/1/.

1. 이 추가 : 의사 요소 앞에 동일한 크기있는 : 요소 다음은
2. 가 약간 이동 :

   단계는 당신이해야 할 요소는 아래

3. 는 흐림 측면
에 필터를 추가하기 전에 그런 다음

그림자는 것 모두, 당신의 빠른 편집 용)

, 당신이 할 수있는

.box:before { 
    content: ''; 
    position: absolute; 
    top: 105%; 
    left: 0; 
    right: 0; 
    border-left: 20px solid transparent; 
    border-right: 80px solid transparent; 
    border-top: 30px solid rgba(0, 0, 0, 0.5); 
    filter: blur(2px); 
} 

을 그리고 원래 상자의 상자 그림자 변경 : 파일에이 CSS를 추가

box-shadow: 0 5px 5px 0 rgba(0,0,0,0.50); 

응원) 깔끔한 트릭의