[分享]css不规则图片实现方法

CSS不规则图片实现方法CSS不规则图片指的是图片不是常规的矩形或圆形，而是拥有不同形状的图形，如梯形、五边形等。以下是实现不规则图片的方法：1. 使用CSS clippathclippath 是CS...

CSS不规则图片实现方法

CSS不规则图片指的是图片不是常规的矩形或圆形，而是拥有不同形状的图形，如梯形、五边形等。以下是实现不规则图片的方法：

1. 使用CSS clip-path

clip-path 是CSS中用于剪切元素的属性，可以用来定义任意形状。使用方法如下：

img{
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
} 

2. 使用 CSS mask-image

mask-image 也是 CSS 中用于剪切的属性，可以实现图片不规则裁剪效果。

img{
    -webkit-mask-image: url('mask.png');
    mask-image:url('mask.png');
} 

3. 使用CSS SVG rect 方法

SVG 是一种使用 XML 描述的矢量图形格式，可以使用 rect 方法来划分图形形状。

<img src="photo.jpg" alt="不规则图片" style="clip-path:url(#clip);"/>
<svg height="0" width="0">
    <defs>
        <clipPath id="clip">
            <rect x="0" y="0" width="***" height="400"/>
            <rect x="200" y="80" width="600" height="320"/>
            <rect x="70" y="170" width="360" height="150"/>
        </clipPath>
    </defs>
</svg> 

以上是 CSS 实现不规则图片的三种方法，具体使用时根据实际需求与优劣来选择。