3-3 形状篇-菱形（多边形）

知识储备

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

---

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