'V'모양처럼 가운데에서 div를 자르는 CSS3 트릭

Question

CSS3를 사용하여 'div'모양처럼 가운데에서 div 요소를 잘라 내고 싶습니다. 누군가 나를 도와 줄 수 있기를 바랍니다.

http://prntscr.com/hpa44s

사람이 어떻게 CSS3에서 이것을 만드는 아이디어가 있습니까 : 그래서 내 디자이너는이 같은 디자인이지만 뭔가를 만들어?

도와 주셔서 감사합니다.

Answer 1

내가 해결하는 데 도움이되는 링크를 찾았습니다.

BODY{ 
    background: url(http://farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg) 0 -100px; 
} 

#wrapper { 
    overflow: hidden; 
    height: 140px; 
} 

#test { 
    height: 101px; /* tweak for ipad */ 
    background-color: #ccc; 
    position: relative; 
} 

#test::before { 
    z-index: -1; 
    content:""; 
    position: absolute; 
    left: -8px; 
    width: 50%; 
    height: 16px; 
    top: 100px; 
    background-color: #ccc; 
    -webkit-transform: skew(-40deg); 
    -moz-transform: skew(-40deg); 
    -o-transform: skew(-40deg); 
    -ms-transform: skew(-40deg); 
    transform: skew(-40deg); 
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
    box-shadow: -2px 4px 8px #000; 
} 

#test::after { 
    z-index: -1; 
    content:""; 
    position: absolute; 
    right: -8px; 
    width: 50%; 
    height: 16px; 
    top: 100px; 
    background-color: #ccc; 
    -webkit-transform: skew(40deg); 
    -moz-transform: skew(40deg); 
    -o-transform: skew(40deg); 
    -ms-transform: skew(40deg); 
    transform: skew(40deg); 
    border-bottom: 2px solid #000; 
    border-left: 2px solid #000; 
    box-shadow: 2px 4px 8px #000; 
} 

http://jsfiddle.net/2hCrw/8/