Question

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

有没有人知道如何在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/

CSS3技巧从'V'形状中心切除div

1 个答案: