박스

Question

나는 이런 식으로 뭔가를 할 노력하고있어 :

상자는 그림자가 그들이 이상이기 때문에 코너의 배경이 투명해야한다 이미지 (예측할 수없는 배경).

Google을 검색 한 후 여분의 마크 업을 사용하는 솔루션뿐만 아니라 유사 선택기 :before 및 :after을 사용하는 솔루션을 발견했지만 모두 고정 색상 배경을 사용합니다. 내가 대신 큰 전체 배경의 상자 - 그림자를 사용하려고하고 코너 만 작은 이미지 해요

:이 내 결과를했다.

어떻게 할 수 있습니까?

Answer 1

사용 모두 의사 요소, 상단 상자 하나는 흰색 삼각형에 대한 다른 :이 그림자를 추가하지 않습니다 http://jsfiddle.net/Kjp6v/

---

: 여기

h1 { 
    background: #F0B032; 
    box-shadow: 1px 1px 4px #362708; 
    line-height: 30px; 
    position: relative; 
} 
h1:before, h1:after { 
    content: ''; 
    position: absolute; 
    left: 100%; 
} 
​h1:before { 
    background: #F0B032; 
    box-shadow: 1px 1px 2px #362708; 
    width: 15px; 
    height: 16px; 
    top: 0; 
} 
h1:after { 
    border: 7px solid transparent; 
    border-left-color: #fff; 
    border-top-color: #fff; 
    bottom: 0; 
} 

는 바이올린의 접은 주머니 밑에서는, 그러나 현실적으로 보입니다.