• css3实现非矩形图片效果


    经常在网站上看到有一些非矩形的图片展示。在以前可能我会毫不犹豫的直接放上张处理好的图片。但是这样的话确实有些不太友好。每每需要换图的时候,都要去开图像处理软件也是蛮拼的。
    自从有了css3的选装,妈妈就再也不用担心我不会用ps了。通过一系列的旋转和隐藏的css,理论上可以做出任何形状的图片来。今天在此就以正六边型抛砖引玉一下,介绍一下多边形的大致原理。

    首先看下效果图:

    实现原理:
    这个效果的主要css样式有:
    1.transform: rotate(120deg); 图片旋转
    2.overflow:hidden; 超出隐藏

    我们要用到3层大小是一样的div进行旋转来得到这个效果。
    最外层div(p1)旋转120度。第二层(p2)旋转-60度,第三层(p3)再旋转-60度,此时刚好回正。
    我们的图片就放在第3层的div中。
    经过旋转肯定有超出的部分,因此对3个div都设置overflow:hidden;
    经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。
    再然后就是通过调整最里层的图片,来达到期望的显示效果了。

    <style type="text/css">
        .p1{200px;height:250px;transform:rotate(120deg);-ms-transform:rotate(120deg);-moz-transform:rotate(120deg);-webkit-transform:rotate(120deg);overflow:hidden;}
        .p2{200px;height:250px;transform:rotate(-60deg);-ms-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);overflow:hidden;} 
        .p3{200px;height:250px;transform:rotate(-60deg);-ms-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);overflow:hidden;position:relative;}
        img{position:absolute;top:0;left:0;80%}
    </style>
    
    <div class="p1">
        <div class="p2">
            <div class="p3">
                <img src="你的图片地址" />
            </div>
        </div>
    </div>
    

      

  • 相关阅读:
    Jenkins安装以及邮件配置
    day12_框架一tools.py代码
    codeforces 1428F
    codeforces 1428G Lucky Numbers (贪心+dp)
    单调队列优化多重背包
    bzoj1190 梦幻岛宝珠
    codeforces 1421 D
    bzoj 2287消失之物 (退背包)
    codeforces 553A
    组合计数小结
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/4900638.html
Copyright © 2020-2023  润新知