浅鱼

实现菱形图片
今天在写电子版个人简历,想要将头像做成菱形,下面是过程:第一步:用一个<div>包裹图像,然后给它们应...
扫描右侧二维码阅读全文
08
2019/01

实现菱形图片

今天在写电子版个人简历,想要将头像做成菱形,下面是过程:

第一步:用一个<div>包裹图像,然后给它们应用相反的rotate()变换:

<div class="head-img">
  <img src="./img/head.jpg" alt="">
</div>

.head-img {
  display: block;
  margin: 0 auto 25px;
  width: 120px;
  border-radius: 5%;
  transform:rotate(45deg);
  border: 1px solid white;
  overflow: hidden;
}
.head-img img {
  max-width: 100%;
  transform: rotate(-45deg);
}

效果图如下:
屏幕快照 2019-01-08 17.52.11.png

可以看出来,反方向的rotate()不足以完成这个效果(.head-img用一个白色边框标出)。

除非我们是要把图像裁剪成八边形的形状,这样我们现在就可以停下来,然后去做其它的事情。如果是把它裁剪成菱形,我们还有很多工作要做。

第二步:把图片裁剪成菱形

主要是max-width: 100%的声明。100%对应的是我们的.head-img容器的边长。但是,我希望我们的图片和它的对角线一样长,而不是它的边。你可能已经猜到了,没错我们要再次使用勾股定理了。定理告诉我们,方形的对角线等于它的边长乘以根号(2)≈1.414213562。因此,把它的max-width设置为根号(2)×100%≈141.4213562%,约等于142%。因为我们不希望它在任何哪种情况下会变小(但稍微大一点是可以接受的,因为我们的图像是被裁剪的)。

事实上,通过scale()变换来放大元素,有以下几个原因:

我们希望图片的大小保持100%,如果CSS变换没有被支持
通过scale()变换来放大图像可以将它从中心放大(除非另外指定了一个不同的transform-origin值)。如果是使用width属性来直接进行大小的调整,那么它会从左上角开始放大,这样我们最后还要使用负边距来移动它。

综上所述:我的最终代码如下:

<div class="head-img">
  <img src="./img/head.jpg" alt="">
</div>

.head-img {
  display: block;
  margin: 0 auto 25px;
  width: 120px;
  border-radius: 5%;
  transform:rotate(45deg);
  border: 1px solid white;
  overflow: hidden;
}
.head-img img {
  max-width: 100%;
  transform: rotate(-45deg) scale(1.42);
}

效果如下:
屏幕快照 2019-01-08 18.00.40.png

参考文献:
1、CSS秘密花园:菱形图片
2、纯CSS实现三角形,圆形,菱形

Last modification:January 8th, 2019 at 06:03 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment