[CSS揭秘]菱形图片

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

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

方案一实现效果:

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

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

使用scale思路的方案代码

.picture{

width: 400px;

transform: rotate(45deg);

overflow: hidden;

}

.picture > img{

max-width: 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%)

实现效果如下:

转载于:https://www.cnblogs.com/joyjoe/p/6916210.html

[CSS揭秘]菱形图片相关推荐

css如何实现菱形背景图片,使用CSS 实现菱形图片，斜条纹背景
比较简单的菱形图片: 效果如下代码部分: .d1{ margin-left: 100px; display: inline-block; transform: rotate(45deg); over ...
《CSS揭秘》：菱形图片
菱形图片在网页设计中,把图片裁切成菱形主要有两种方法.一种是基于元素嵌套方案,另外一种是裁切路径方案元素嵌套方案在线编辑将图片用一个<div>包裹起来,对这个<div> ...
通过css裁切图片为菱形图片
在web设计中,把图片裁切成菱形图片展示是一种常见的需求,通过photoshop直接将一张图片裁剪成菱形是一种解决方案,但不是最佳解决方案,这里笔者直接通过css设计了两种方案,来实现让图片菱形展示. ...
html图片做成菱形,两种css实现菱形的方法以及拓展特效
提到用css实现菱形,在我看来有两种比较便利而且兼容性不错的方法,实现的方式也都不难,但是简单的方法其实也可以做出一些眼前一亮的特效,后面会为大家介绍,下面先来说说两种实现菱形的方式. 方法一:bor ...
《CSS揭秘》读书笔记
摘要 <CSS揭秘>主要是介绍了使用CSS的技巧,通过47个案例来灵活的使用CSS进行实现,同时在实现过程中注重CSS代码的灵活性与健壮性.通过阅读这本书有利于我们编写高质量的CSS代码以 ...
css揭秘实战技巧 - 形状 [二]
全目录本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果: css揭秘实战技巧- 背景与边框 [一] css揭秘实战技巧- 形状 [二] css ...
《CSS揭秘》-总结47个Css技巧（一）：常用的背景与边框技巧
注:本文案例来源于<CSS揭秘>这本书. 1. 设置半透明边框无效? 使用 background-clip padding-box 解决. background white backgro ...
css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法译该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
CSS揭秘：6.复杂的背景图案（上）
文章目录前言一.网格 1. 实色网格 2. 边框网格 3. 波点 4. 棋盘小结相关阅读前言上一篇文章中我们学会了如何使用渐变实现条纹状的背景,但是实际上条纹背景并不是我们能实现的唯一的背 ...
《CSS揭秘》笔记（一）
前言我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...

[CSS揭秘]菱形图片

[CSS揭秘]菱形图片相关推荐

最新文章

热门文章