| css实现平行四边形、菱形图片效果 | 您所在的位置：网站首页 › 网页设计如何制作盒子图片 › css实现平行四边形、菱形图片效果 |
css实现平行四边形、菱形图片效果
|
一、平行四边形 1. 使用两个元素实现 html click mecss .button{ margin: 50px; display: inline-block; background: #404ED3; transform: skewX(-45deg); } .button>div{ padding: 15px; color: white; font-size: 24px; transform: skewX(45deg); }效果图
原理： 将容器和内容区域做相反方向的变形，就可以使外面的容器变形，同时不会影响内部的元素。 2. 使用伪元素实现 我们可以把所有样式都应用到伪元素上，然后再对伪元素进行变形。因为我们的内容并不是包含在伪元素中，所以内容并不会受到伪元素的影响。同时，我们希望伪元素保持良好的灵活性，可以自动继承宿主元素的尺寸，甚至当宿主尺寸是由其内容来决定时仍然如此。一个简单的办法就是给宿主元素应用position：relative，并且为其伪元素设置position：absolute，然后再把所有偏移量设置为0，以便让他在水平方向和垂直方向都和宿主尺寸相同。 html click mecss .button{ position: relative; display: inline-block; margin: 50px; padding: 15px; color: white; font-size: 24px; } .button::before{ background: #404ED3; z-index: -1; position: absolute; content: ''; top: 0;left: 0;right: 0;bottom: 0; transform: skewX(-45deg); }值得注意的是：用伪元素生成的方框是重叠在内容上面的，一旦给他设置背景就会遮住内容，为了解决这个问题，我们给伪元素设置了z-index：-1，这样他的堆叠层次就会被推到宿主元素之后。 效果图：
二、菱形图片 1. 使用两个元素实现 思路：我们可以将父元素旋转45deg，然后将里面的图片在向相反方向旋转45deg,并且设置父元素的overflow:hidden，子元素的最大宽度为100%。 html css .picture{ margin: 100px; width: 300px; transform: rotate(45deg); overflow: hidden; } .picture>img{ width: 300px;/*100%*/ transform: rotate(-45deg); }效果图
虽然这个八边形看起来也很好看，不过这不是我们想要的，原因在于图片的宽度应该为父元素（正方形）宽度的对角线长度，所以我们可以调整一下 css .picture{ margin: 100px; width: 300px; transform: rotate(45deg); overflow: hidden; } .picture>img{ max-width: 100%; transform: rotate(-45deg) scale(1.42); }效果图
2. 使用clip-path实现 hml css .parent{ width: 300px; } img{ width: 100%; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); transition: 1s clip-path; } img:hover{ clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }如此简单的代码就实现了菱形，我们甚至实现了在鼠标悬停的时候平滑的扩展为完整的面积。 效果图
|
【本文地址】
公司简介
联系我们