css3实现非矩形图片效果

最新推荐文章于 2021-06-11 16:49:39 发布

转载最新推荐文章于 2021-06-11 16:49:39 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xupeiyu/p/4900638.html

文章标签：

#人工智能

本文介绍如何利用CSS3的旋转和隐藏特性，通过三层大小相同的div进行旋转，实现制作任意形状图片的效果。以正六边形为例，详细解释了实现原理和具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经常在网站上看到有一些非矩形的图片展示。在以前可能我会毫不犹豫的直接放上张处理好的图片。但是这样的话确实有些不太友好。每每需要换图的时候，都要去开图像处理软件也是蛮拼的。
自从有了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{width:200px;height:250px;transform:rotate(120deg);-ms-transform:rotate(120deg);-moz-transform:rotate(120deg);-webkit-transform:rotate(120deg);overflow:hidden;}
    .p2{width:200px;height:250px;transform:rotate(-60deg);-ms-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);overflow:hidden;} 
    .p3{width: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;width:80%}
</style>

<div class="p1">
    <div class="p2">
        <div class="p3">
            <img src="你的图片地址" />
        </div>
    </div>
</div>

转载于:https://www.cnblogs.com/xupeiyu/p/4900638.html