의사 요소로 만든 모양 (삼각형)의 그림자

Question

CSS에 :after 및 :before을 사용하여 모양을 만들었습니다. :before으로 삼각형을 만들었고 전체 모양에 그림자 효과를주고 싶습니다. 그러나 삼각형은 투명도를 사용하여 만들어집니다. 일반적으로 사각형이지만 투명도는 삼각형이되므로 그림자를 추가하려고하면 그림자가 사각형에 추가됩니다.

이 바이올린에서

http://jsfiddle.net/ctarimli/uQQhG/3/

, div a 내가 만든 모양입니다 : 내 설명이 복잡하면

, 여기에 바이올린입니다. Div b은 그림자를 추가하려는 시도를 보여주고 자하는 모양입니다. 그리고 div c을 준비하고 가상 부품을 쉽게 볼 수 있도록 의사 부품의 색상을 변경했습니다.

바이올린에서 보았 듯이 삼각형 부분의 그림자는 내가 원하는대로 작동하지 않습니다. 나는 이것이 정상적이라는 것을 알고 있지만 이것에 대한 해결책이 있는지 궁금해.

두 번째를 사용하려고했습니다. 또는 : before를 사용하여 새 의사 요소를 추가하여 그림자를 만들었지 만 할 수 없었습니다. 또한 두 번째로 :before과 :after을 사용할 수 있습니까?

Answer 1

의사 전자 및 비뚤어 짐을 사용할 수 있습니다.

그런 다음 내부 그림자를 파견하고 필요한 경우 외부 서로를 숨길 수 :

DEMO

---

CSS

#a { 
    background: turquoise ; 
    margin:1em; 
} 
#b { 
    background: tomato ; 
    margin:1em auto; 
} 
#c { 
    background: orange ; 
    margin:1em 18%; 
} 
div {box-shadow:0 0 5px; width:80%;} 
div:after {/* after so it comes last */ 
    content:''; 
    display:block; 
    height:1.4em;/* tune its-height */ 
    position:relative;/* to move a bit to hide box-shadow of div parent */ 
    top:5px; 
    left:-10px; 
    background:white; 
    width:30%;/* tune its size */ 
    box-shadow: 
    inset 18px 0 0 white, 
    inset 0px -3px white, 
    inset 0 0 3px black; 
    transform:skew(45deg); 
} 

---

HTML 자료 :

<div id="a">a <br/><!--demo behavior purpose--> A</div> 
<div id="b">b</div> 
<div id="c">c</div>