我有一个设计,其中图像的角落以45°角切割.目前,它是通过使用绝对定位的跨度进行遮罩来实现的,该跨度具有透明的背景图像,其中角落“切割”为不透明的白色.这远非理想,首先是因为额外的跨度,其次是因为图像的背景不是均匀的白色.
我打算稍后生成透明的PNG,但它会更优雅 – 考虑到图像是照片 – 使用JPEG和CSS的带宽更少.新的CSS掩码属性看起来很有希望,但据我所知,它没有提供能力,“掩盖”到元素的背景,是吗？
所以我的问题是,是否有任何新的CSS属性,我不知道,并允许我这样做？
解决方法
使用转换(仅限CSS3解决方案)
以下方法存在少量不精确性,并且存在两个“编码”缺点：
> img上需要两个包装器
>需要知道图像的大小(如果图像是设置大小或者如果使用javascript来提供宽度/高度信息,则可能并不总是有缺点).
但是,对于IE8及更低版本,它确实会很好地降低到方角.
核心思想是调整外包装的大小并隐藏其溢出,正确调整大小,旋转和缩小内包装以创建倒角(也隐藏溢出),然后反转旋转并缩放,然后重新定位需要img嵌套在里面.该方法足够强大,可以根据需要设置一些相当不错的边框,尽管在浏览器上呈现这样的边框会因质量而异.
HTML(基本表格)
跨度可以是div.
<span class="chamfer">
<span>
<img src="http://placehold.it/351x151" />
</span>
</span>
CSS(基本形式)
.chamfer {
overflow: hidden;
display: inline-block; /* could be "block" */
margin: 25px; /* for demo only */
/* Because of the rotations following,it seems like an odd
number in width and height worked more consistently,as
it gives a "middle" pixel by which to transform the rotation
off of
*/
width: 351px; /* width of image */
height: 151px; /* height of image */
}
.chamfer > span {
overflow: hidden;
display: inline-block; /* could be "block" */
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* The rotation gets the chamfer angle
the scale sets the "size" of the cut
though not very precisely (exact px height
is not possible to set explicitly.
*/
-moz-transform: rotate(45deg) scale(.9);
-webkit-transform: rotate(45deg) scale(.9);
-o-transform: rotate(45deg) scale(.9);
-ms-transform: rotate(45deg) scale(.9);
transform: rotate(45deg) scale(.9);
/* top/bottom padding is image width (351px)
minus the image height (151px) = 200px divided by 2;
if the image were taller than wide,then this
would become (iH - iW) / 2 for the left/right padding
*/
padding: 100px 0;
margin-top: -100px; /* adjust for the padding */
/* the following helped "square" the item better */
width: 100%;
height: 100%;
}
.chamfer img {
display: inline-block; /* could be "block" */
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* The rotation is reversing the wrapper rotation
to put the image horizontal again,while the scale
is the inverse of the wrapper's scale,so here
it is ( 1 / 0.9 ) = 1.11,to scale the image back
up to correct size
*/
-moz-transform: rotate(-45deg) scale(1.11);
-webkit-transform: rotate(-45deg) scale(1.11);
-o-transform: rotate(-45deg) scale(1.11);
-ms-transform: rotate(-45deg) scale(1.11);
transform: rotate(-45deg) scale(1.11);
}
HTML(较小的倒角,2px边框)
请参阅上面的小提琴,了解具有10px边框版本的“更大”倒角.
当然,如果你的所有图像都有一个设置大小的边框,你只需要像上面的基本html一样,而不是像我在这里那样覆盖类.
<span class="chamfer small b2">
<span>
<img src="http://placehold.it/351x151" />
</span>
</span>
CSS(覆盖上面的基本CSS)
请参阅上面的小提琴,如果你的所有图像都是一个设置大小的边框,你只需要将它们作为基本css的值,而不是在这里定义的单独的类中进行.
.b2 * {
border: 2px solid black;
}
.chamfer.b2 { /* 2px border */
width: 355px; /* 4px added for the 2px border */
height: 155px; /* 4px added for the 2px border */
}
.chamfer.b2 > span {
margin-top: -102px; /* the extra 2px is to accomodate top border of 2px */
margin-left: -2px; /* this is for the 2px left border */
}
.chamfer.small > span {
/* changed the scale for a smaller cut */
-moz-transform: rotate(45deg) scale(.96);
-webkit-transform: rotate(45deg) scale(.96);
-o-transform: rotate(45deg) scale(.96);
-ms-transform: rotate(45deg) scale(.96);
transform: rotate(45deg) scale(.96);
}
.chamfer.small img {
/* scale changed on wrapper to .96 so scale changes on
image to ( 1 / 0.96 ) = 1.042.
*/
-moz-transform: rotate(-45deg) scale(1.042);
-webkit-transform: rotate(-45deg) scale(1.042);
-o-transform: rotate(-45deg) scale(1.042);
-ms-transform: rotate(-45deg) scale(1.042);
transform: rotate(-45deg) scale(1.042);
}
