CSS3从中心像“V”形切出div的技巧

我想使用CSS3从中心切出我的div元素，就像一个“V”形。 我希望有人能帮我解决这个问题。 我的设计师创造了一个设计，但像这样：

有人知道如何在css3中创建这个吗

---

谢谢你的帮助

找到了一个帮助我解决问题的链接

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;
}