zoukankan      html  css  js  c++  java
  • [CSS揭秘]菱形图片

    场景: 设计师设计了一个菱形区域用来展示图片

    与平行四边形一节类似,可以采用将图片用容器包裹起来后旋转45度。同时将内部图片反方向旋转45度(因为容器旋转也会使得内部元素也旋转)。

    方案一实现效果:

    由于图片的宽度与容器的宽度一致,所以反方向旋转后会产生八边形。解决方案是将图片的宽度设置为容器宽度的142%倍。同时由于图片缩放是相对于容器左上角进行的,因此还要调整图片的边距从而实现菱形图片。

    使用scale缩放可以很方便的实现菱形图片,因为缩放的中心点就是图片的中心点。

    使用scale思路的方案代码

    .picture{

        400px;

        transform: rotate(45deg);

        overflow: hidden;

    }

    .picture > img{

        max- 100%;

        transform: rotate(-45deg) scale(1.415);

    }

    以上实现菱形图片的方案也是存在部分局限性的。比如: 要求图片是一个正方形。

    终极解决之道是利用CSS3的clip-path属性

    参考地址 https://www.w3.org/TR/css-masking/#the-clip-path

    关于CSS3的clip-path属性讲解可以参考这篇文章 http://www.cnblogs.com/joyjoe/p/6917036.html

    使用CSS3的clip-path来实现菱形图片就非常简单了

    img{

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

    }

    使用polygon()来绘制一个菱形图案,通过指定4个顶点可以精确绘制出一个菱形,分别是 (50% 0), (1000% 50%), (50% 100%), (0 50%)

    实现效果如下:

  • 相关阅读:
    day09 文件操作
    深信服二面
    test1
    视频测试
    通过独立按键控制LED灯
    第一个LED灯
    为什么我的递归调用次数和书上的不一样?
    函数指针数组
    虚拟内存
    单元测试
  • 原文地址:https://www.cnblogs.com/joyjoe/p/6916210.html
Copyright © 2011-2022 走看看