image - css3中的两个空中飞人

Question

我有一个关于 css3 和空中飞人的小问题。我有两个并排的方形图像（每个都向左浮动 - 白点），我希望它们看起来像这样：

你会怎么做？可能吗？

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() 指定旋转的第二条 (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/