-1
CSS3を使って 'V'のように中心からdiv要素を切り取りたい。 誰かが私を助けてくれることを願っています。 は、だから私の設計者は、このようなデザインが、何かを作成:「V」のような中心からdivを切り取るCSS3のトリック
を誰もがCSS3でこれを作成する方法のアイデアを持っていますか?
ありがとうございます!
CSS3を使って 'V'のように中心からdiv要素を切り取りたい。 誰かが私を助けてくれることを願っています。 は、だから私の設計者は、このようなデザインが、何かを作成:「V」のような中心からdivを切り取るCSS3のトリック
を誰もが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;
}