不规则图片显示（css实现多边形）_不规则形状的样式如何放在页面css_快乐小沙弥的博客

原图

实现后的效果图

其实要实现这种效果有两种方式：

一种是让UI做图的时候就把边框以外的部分设计成与背景色相同的颜色。
边框图片与内容图片大小一致，正常重叠就好，这样做的优势可以减少代码量，方便服务端维护，不会出现样式兼容问题；缺点也有一些，就是特殊形状的展示不好实现，会多几次图片的请求。
另一种就是纯CSS实现，主要是利用css3中的clip-path属性。
优点就是可以实现任意形状的展示，包括图片、背景色等
代码如下：

<div className="warp">
  <img src="./irregularity.png"></img>
</div>
.warp {
  background: url(./bj.jpg) no-repeat center;
  background-size: cover;
  clip-path: polygon(0% 8%, 6% 0, 23% 0, 26% 4%, 96% 4%, 100% 10%, 100% 91%, 95% 98%, 6% 98%, 0 90%);
clip-path介绍
 
CMD的简介
 clip-path目前浏览器支持情况可以看这里 
clip-path的其他应用
 
如下：三角，四角，五角星，还有移动端的0.5像素
  
.three-pointed-star {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
.four-pointed-star {
  clip-path: polygon(0 50%, 40% 40%, 50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%);
.five-pointed-star {
  clip-path: polygon(0 36%, 36% 36%, 46% 0, 56% 36%, 92% 36%, 63% 56%, 73% 92%, 46% 70%, 20.6% 92%, 30% 56%);
.line {
  background-color: red;
  height: 1px;
  line-height: 1px;
  margin: 10px;
.half-line {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
                    需求：怎样才能截取背景图片或者让图片在不规则盒子里面展示？原图实现后的效果图其实要实现这种效果有两种方式：一种是让UI做图的时候就把边框以外的部分设计成与背景色相同的颜色。边框图片与内容图片大小一致，正常重叠就好，这样做的优势可以减少代码量，方便服务端维护，不会出现样式兼容问题；缺点也有一些，就是特殊形状的展示不好实现，会多几次图片的请求。另一种就是纯CSS实现，主要是利用css...
				一般情况下导航菜单的背景图片都是比较有规则的，但是平时我们也会遇到很多背景图片形状不规则导航条（比如但鼠标移上的时候，背景图片不规则，本例只讨论此种类型）,如下图所示：
当鼠标移上去的时候背景变成红色箭头，也许，咋一看，觉得这个效果并没有什么特别的地方，但是仔细看看我画上去的绿色框框部分，就会发现每一块都是接在一起的不会断开的；如果说按照普通方法来做，那么实现的可能是下图所示的效果：
即是块与块之间是断开的。
复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www
				“我就係風魔萬千前端開發，改造web風氣，刺激圖片市場，提高代碼內涵，玉樹臨風，風度翩翩的css專家之一，我個名叫剪切路徑，英文名叫clip-path”。
——题记，改编源自《整蛊专家》
话说我们上回讲道：如何利用css实现多边形，综之原理便是利用width、height为0，结合border，一个纯多边形在代码下诞生了。那么，图片呢，我突然想让图片也显示的不规则，咋弄。今
				CSS创建复杂图形的技术即将会被广泛支持，并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解。现在，我们已经可以使用CSS3常见不规则复杂图形了，如下图所示：使用CSS创建的图形，无法内置文字或实现文字环绕效果。因此，如何实现不规则图形和文字复杂布局也成为了一个热议话题。今天我们就来介绍一下如何实现这个效果。文章中我们将阐述如何使用CSS创建不规则图形，实现不规则的文本布局。学会如何创建不规则图形之后，你就可以发挥想象力，创建唯美的CSS页面了，下图既是使用该技术创建的《爱丽丝梦游仙境》效果图：注：这是CSS的最新技术，所以对浏览器版
				可以使用CSS的:hover伪类和cursor属性来实现鼠标经过箭头显示效果。具体实现方法如下：
1. 在CSS中定义一个类，例如.arrow，设置cursor属性为pointer，表示鼠标经过时显示为箭头。
.arrow {
  cursor: pointer;
2. 在HTML元素中添加该类，例如一个链接：
<a href="#" class="arrow">鼠标经过我试试</a>
当鼠标经过该链接时，会显示为箭头，表示该链接可以被点击。