css常见效果——棱形图片

难题

在视觉设计中，把图片裁切为棱形是一种常见的手段，这里我们需要实现一下效果

有些同学可能简单的认为，将container旋转45deg就ok了，但是你们想过没有，容器旋转了45deg，图片也会跟着旋转45deg；又有同学说，那我把图片再旋转-45deg，不就行了吗，但是真的可以实现吗?
错误的代码：

  .pic {width: 200px;transform: rotate(45deg);overflow: hidden;margin: 100px auto;}.pic > img {max-width: 200px;height: 200px;transform: rotate(-45deg);        }

错误的效果：

所以，不是那么简单的。
我们来思考一个问题，那就是我们设置了overflow: hidden将图片旋转-45deg之外的部分裁剪掉了，那么图片的长度就不是那么长了，我们就需要将图片的长度恢复到多大才能填充到图片那么大呢？
相信不少同学都开始算数学，告诉你们其实需要将图片放大1.414倍（根号二），其实这是一个简单的数学问题，具体的细节就需要各位画个草图解答。
接下来我们只需要将图片变为原来的1.414倍就可以了

  .pic > img {max-width: 200px;height: 200px;/* 将图片大小变为原来的1.414倍撑满整个container */transform: rotate(-45deg) scale(1.414);}

效果图如下：

css常见效果——棱形图片相关推荐

css常见效果——信封效果
需求,我们需要实现如图所示的信封效果相信大部分人都会再网上找,在这里我们来剖析其原理. 45°折角的解决方案折角我想大多数人都会想到用伪元素或者一个真实的dom,但是那样开销大.这里我是用渐变来实 ...
不用找UI， CSS也能搞定图片效果（等比缩放，背景模糊处理，投影等等）
一. 实现图片的等比缩放在实际开发过程中, 总是会遇到各种需要处理图片的情况,举个简单的例子, 用户上传头像,我们都知道头像宽高是有一定比例的, 但用户的图片千奇百怪,如果简单的按照我们设定的宽高显 ...
Unity3d Ugui图片上制作点光、棱形光效果shader，并具有裁切
Unity3d Ugui图片上制作点光 .棱形光效果实现的效果可以参考如下图所示通过shader来实现上述的效果,为了大家的适应性,推荐在unity官方的默认ui shader上更改,我用的是20 ...
filter滤镜实现img图片的CSS蒙版效果、模糊效果
文章目录 ```filter滤镜```实现```img图片```的CSS```蒙版效果.模糊效果``` 1. 效果图 2.代码实例注意: 3.兼容性对比 filter滤镜实现img图片的CSS蒙版效 ...
php网页如何做出透明的效果,css+filter实现简单的图片透明效果
完成简单的透明度控制功能使用filter的功能对图片元素进行透明度控制. 支持IE8,Chrome浏览器. 复制代码代码如下: /*透明20%*/ .opacity-20 { filter:alph ...
CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位至于opacity的作用:转化图像的透明程度.值定义转换 ...
利用echarts实现心形图片排列效果
内容简介前几天看到一篇文章,利用echarts来实现气泡龙的效果,觉得可以从这个例子衍生出使用不同背景图来实现不同排版的效果:本文介绍利用该思路实现心形图片的排列效果. 实现过程实 ...
css鼠标经过图片镜像翻转,css代码实现鼠标指向图片翻转效果
烈火网(Liehuo.Net)教程今天有读者询问制作鼠标经过时切换图片的效果,这种效果也称为"翻转"效果(roll-over).原来这种效果大多使用Javascript实现,实际 ...
css 实现带文字，阴影效果的棱形
今天开发VUE项目,要实现一个UI效果.感觉效果挺好,记录一下.先看效果图先说下实现思路刚看到这个布局的时候,感觉用个p 标签旋转45deg应该就能实现,但是旋转之后文字也跟着旋转了.这个问题不能够 ...

css常见效果——棱形图片

难题

css常见效果——棱形图片相关推荐

最新文章

热门文章