赶上时代步伐,我们也来做“菱形图片”

 2016-09-29 10:29

最近流行起来使用菱形图片来做人物头像的效果。借此,我们也来学习下如何使用来做这种风格。其实,这种风格也是最近才基本成为可能的,但由于其维护并不友好,所以使用比较局限,大部分情况下还是用来做人物头像居多。

菱形图片

基于变形的方案

主要的思路和之前那个“平行四边形”的思路一样,就是通过旋转来做的。

<div class="picture">
    <img src="..." alt="...">
</div>
.picture{
    width:180px;
    overflow:hidden;
    transform:rotate(45deg);
}
.picture>img{
    max-width:100%;
    transform:rotate(-45deg);
}

但得到的效果却的这个样子的:

菱形图片

奇怪,问题出在哪儿呢?我可以告诉你,问题出在max-width:100%这条申明上。100%会被解析为容器(.picture)的边长。但是我们现在要是图片的宽度与容器的对角线相等。那么,我们又要请出勾股定理了,还记得我们中学时学的“等腰直角三角形”吗?它的三边比是1:1:√2,√2≈1414213562。因此,我们把它的max-width值设置为142%才是最合适的。

但其实,如果用scale()来变形样式会更合理写,原因如下:

  • 我们希望图片尺寸属性保留100%的值,当浏览器不支持时仍然是个合理的布局;

  • 通过scale()变形缩放图片时,是以它的中心点进行缩放的,而width是以它的左上角来缩放的;

所以,我们把CSS代码调整如下:

.picture{
    width:180px;
    overflow:hidden;
    transform:rotate(45deg);
}
.picture>img{
    max-width:100%;
    transform:rotate(-45deg) scale(1.42);
}

裁切路劲方案(不完全兼容)

上面这个方案还有一些小毛病:它需要给图片增加一个元素,另外,如果图片不是正方形,那么裁切出来效果就变得很奇怪:

菱形图片


事实上,我们也有一个更好的方法。它的主要思路是通过clip-path属性。这个特性也是从SVG那里借鉴过来的,并且他很友好、可读性也不错。但就是兼容性差点,在文章发布时,支持这个的浏览器还不多。但是,它可以平稳退化,因为不支持就不会发生变化。

我们会用polygon()(多边形)函数来指定一个菱形。实际上,它允许我们用一系列坐标来指定任意的多边形。我们甚至可以使用百分号:

clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);

信不信由你,就是这么简单!这个属性甚至还可以参与动画,如果不是兼容性不好的原因的话,这函数会大有作为的。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: