知识储备
1.上一小节的rotate()/skew()
2.clip-path属性是指定一个应用到元素上的剪切路径
状态函数包括
polygon() 多边形
circle() 圆形
inset() 内嵌圆角矩形
ellipse() 椭圆形
1.polygon()参数 角坐标
配图一张，理解一下
坐标理解
2.circle(30% at 40% 50%) 参数
30% -> 半径
40% 50% -> 圆心
3.inset()
位置 / 圆角
inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>)
4.ellipse(20% 40% at 40% 50%)
x/y半径 / 位置
小测试
第一种方法
示例代码1
html
<div class="picture">
<img src="1.jpg" alt="海贼王">
</div>
css
.picture{
width: 400px;
transform: rotate(45deg);
overflow: hidden;
margin: 100px auto;
}
.picture > img{
max-width: 100%;
/*transform: skew(45deg,-45deg);*/
transform: rotate(-45deg) scale(1.42);
}
效果：
菱形图片
1.这里先将div盒子整体旋转45deg(如果不清楚skew()和rotate()的区别，先了解一下)
2.再将图片反着旋转，和上一节的菱形导航条原理类似
3.scale()放大。如果不加scale()，则效果是这样的
scale原理
放大倍数为1.41，没错又是勾股定理。（感觉做CSS设计加入一点数学和物理元素，总会让效果更加真实和吸引人眼球）
上述方法只适用于正方形图片
更好的解决办法
2.利用知识储备clip-path属性来进行裁剪
这个属性会优雅降级，如果浏览器不支持则会按原图显示
示例代码2
html
<img src="3.jpg" alt="海贼王">
css
display: block;
margin: 0 auto;
width: 300px;
-webkit-clip-path: polygon(50% 0, 100% 50%,50% 100%,0 50%);
效果：
菱形裁剪
让我们加入一些小动画！
css
.square-img{
display: block;
margin: 0 auto;
width: 300px;
-webkit-clip-path: polygon(50% 0, 100% 50%,50% 100%,0 50%);
transition: 1s -webkit-clip-path;
}
.square-img:hover{
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%,0 100%);
}
当我们划过图片时，图片会显示全部！
利用clip-path的裁剪特性
我们来做一些小特效，效果类似于
文字
示例代码3
html
<img src="2.jpg" alt="bao" />
<svg height="0" width="0">
<defs>
<clipPath id="svgTextPath">
<text x="0" y="150" textLength="300px" font-family="Vollkorn" font-size="10em" font-weight="700" font-style="italic"> baoIII </text>
</clipPath>
</defs>
</svg>
img {
width: 400px;
-webkit-clip-path: url('#svgTextPath');
clip-path: url('#svgTextPath');}
小结：虽然菱形在应用方面不广，但是给了我们更多的元素组合和一些新的视觉感受！
网友评论