3-3 形状篇-菱形(多边形)

知识储备

1.上一小节的rotate()/skew()

2.clip-path属性是指定一个应用到元素上的剪切路径
状态函数包括
polygon() 多边形
circle() 圆形
inset() 内嵌圆角矩形
ellipse() 椭圆形

1.polygon()参数 角坐标
配图一张,理解一下

3-3 形状篇-菱形(多边形)_第1张图片
坐标理解

2.circle(30% at 40% 50%) 参数
30% -> 半径
40% 50% -> 圆心

3.inset()
位置 / 圆角

inset(    round    )

4.ellipse(20% 40% at 40% 50%)
x/y半径 / 位置


小测试

第一种方法
示例代码1
html

海贼王

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);
}

效果:

3-3 形状篇-菱形(多边形)_第2张图片
菱形图片

1.这里先将div盒子整体旋转45deg(如果不清楚skew()和rotate()的区别,先了解一下)
2.再将图片反着旋转,和上一节的菱形导航条原理类似
3.scale()放大。如果不加scale(),则效果是这样的

3-3 形状篇-菱形(多边形)_第3张图片
scale原理

放大倍数为1.41,没错又是勾股定理。(感觉做CSS设计加入一点数学和物理元素,总会让效果更加真实和吸引人眼球)

上述方法只适用于正方形图片


更好的解决办法
2.利用知识储备clip-path属性来进行裁剪
这个属性会优雅降级,如果浏览器不支持则会按原图显示
示例代码2
html

海贼王

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-3 形状篇-菱形(多边形)_第4张图片
文字

示例代码3
html

bao
    
       
     
        baoIII         
      
  

img { 
  width: 400px; 
  -webkit-clip-path: url('#svgTextPath');   
  clip-path: url('#svgTextPath');}

小结:虽然菱形在应用方面不广,但是给了我们更多的元素组合和一些新的视觉感受!

你可能感兴趣的:(3-3 形状篇-菱形(多边形))