image - css3 の 2 つの空中ブランコ

Question

css3 と空中ブランコについて小さな問題があります。私は2つの正方形の画像を並べて持っていて（それぞれ左に浮く - 白い点）、私はそれらを次のように見せたい：

どのようにしますか？出来ますか？

Answer 1

pic1 が a.pngで、台形のエッジの角度によって作成される負のスペースが透明である場合、これは機能するはずです。

#pic1, #pic2 {
    float: left;
    position: relative;
}
#pic1 {
   z-index: 2;
}
#pic2 {
   right: 30px; /* Or whatever the difference in image sizes is */
}

Answer 2

最初に、上下の境界線に沿ってカットするストリップの設定と、画像を配置する場所の設定を開始します。

.demo1 {
    overflow-y: hidden;
}

内部には基本要素があり、左に浮かんでいます。

.base {
    width: 100px;
    height: 100px;
    float: left;
}

内部では、クリッピング要素が回転しています:

.demo1 .clip {-webkit-transform: rotate(15deg);}

.clip { 
    height: 177%; 
    width: 125%; 
    margin-top: -40%; 
    -webkit-transform-origin: 0% 50%; 
    overflow: hidden
}

内部では、逆回転した画像 .demo1 .inner { -webkit-transform: rotate(-15deg); } .inner { -webkit-transform-origin: 0% 50%; マージン左: -151%; マージントップ: 19%; }

htmlは次のとおりです。

WEBKITTED DEMO webkitted は、webkit プレフィックスのみが使用されることを意味します :-)

誰かが 100 万ポイントを提供していたので、私は余分な努力をすることにしました。回転が nth-child() によって指定されている 2 番目のストリップ (demo2) を参照してください。これにより、トランジションごとに異なる角度を取得できます。

フル CSS :

.demo1, .demo2 {
overflow-y: hidden;
}
.base {
width: 100px;
height: 100px;
float; left;
}

.clip {height: 177%; width: 125%; margin-top: -40%;-webkit-transform-origin: 0% 50%; overflow: hidden}
.inner {-webkit-transform-origin: 0% 50%;margin-left: -151%;margin-top: 19%;}
.terminator {background-color: white}

.demo1 .clip {-webkit-transform: rotate(15deg);}
.demo1 .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(odd) .clip {-webkit-transform: rotate(15deg);}
.demo2 :nth-child(odd) .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .clip {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .inner {-webkit-transform: rotate(15deg);margin-left: -151%;margin-top: -30%;}

画像を正確に配置する計算は奇妙であることに注意してください。試行錯誤しながらやっていきます。また、興味のあるポイントを失わずに切り取るためには、十分な余白のある画像が必要です。

Answer 3

透明な境界線で CSS 三角形のトリックを使用できます

html

<div class="pic pic-1">Pic 1</div>
<div class="pic pic-2">Pic 2</div>

CSS

.pic{
    width:100px;
    height:100px;
    float:left;
    text-align:center;
    line-height:100px;
    color:white;
    position:relative;
}
.pic-1{
    background:orange;
}
.pic-2{
    background:limegreen;
}
.pic:after{
    content:'';
    display:block;
    position:absolute;
    height:0;
    width:0;
    z-index:10;
}
.pic-1:after{
    top:0;
    right:-10px; /* must match the border left */
    border-left: 10px solid orange; /*play with width to change angle*/
    border-bottom:50px solid transparent;
}
.pic-2:after{
    bottom:0;
    left:-10px; /* must match the border right*/
    border-right: 10px solid limegreen;/*play with width to change angle*/
    border-top:50px solid transparent;
}

http://jsfiddle.net/gaby/eh2f3/のデモ