# 如何用 css 实现三角形？你是不是还在用这种方式，利用 border 的 color 属性来实现三角形。

``` .triangle { width: 0; height: 0; border: 5px solid #000; border-color: transparent transparent #000 transparent; } ``` 今天给大家介绍一个 css 中的一个不是很常用的属性 `clip-path` 来实现一个三角形。

image (1).png

``` .polygon { width: 100px； height: 100px; background-color: red; clip-path: polygon(50% 0, 100% 100%, 0 100%); } ``` # 了解clip-path 顾名思义，『剪裁』，它可以按照 svg 路径、盒子模型、基本多边形路径等几种不同的方式来裁切。`clip-path` 有几大类，分别为： * `basic-shape`：基本图形，包括 `inset()`、`circle()`、`ellipse()`、`polygon()` * `clip-source`：通过 `url()` 方法引用一段 `SVG` 的 `` 来作为剪裁路径 * `geometry-box`：单独使用时，将指定框的边缘作为剪裁路径，或者配合 `basic-shape` 使用，用于定义剪裁的参考框（Reference Box）`（由于该属性浏览器支持度比较低，本文暂不讨论）` ## SVG剪裁语法：`clip-path: url ()`;先定义一个svg路径,然后给元素加上`clip-path: url(#id)`，其中id 为 `clipPath` 标签的 id。推荐网站：[svg路径生成](https://www.jq22.com/code2254)，可通过自行拖拽生成 svg 路径。用法如下：

image (2).png

```

``` ``` .clipImg{ width: 800px; clip-path:url(#svgPath) } ``` ## 基本图形：inset 按矩形剪裁，语法 `clip-path:inset(top,right,bottom,left)`; ``` clip-path: inset(10% 10% 10% 10%); ```

image (3).png

### insert 可实现的动画—— loading 加载中

不知道你有没有看到过这样的 `loading` 效果，在没了解 `clip-path` 之前，可能会让 U 同学来个动图，然后来实现这样的效果，但是接触到 `clip-path` 以后，`只要脑洞够大`，很多效果可以利用纯 css 去实现。实现思路： * 利用 clip-path 对边框进行裁剪 * 流动感通过裁剪位置随机来实现 * 渐变颜色动画则是利 `filter: hue-rotate()`; [属性值参考文章](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate) 来实现。

image (4).png

image (5).png

image (6).png

image (7).png

``` /*主要逻辑代码示例：*/ .border { border: 2px solid; border-image: linear-gradient(45deg, rgb(184, 159, 218), rgb(15, 48, 194)) 1; clip-path: inset(0 96% 0 0); animation: clipPath 1s infinite linear; } @keyframes clipPath { 0%{ clip-path: inset(0 0 96% 0); filter: hue-rotate(0deg); } 25% { clip-path: inset(0 96% 0 0); } 50% { clip-path: inset(96% 0 0 0); filter: hue-rotate(360deg); } 75% { clip-path: inset(0 0 0 96%); } 100% { clip-path: inset(0 0 96% 0); filter: hue-rotate(0deg); } } ``` ```

``` ## 基本图形：circle 按圆形剪裁，语法 `clip-path:circle(50% at 50% 50%）`，at 前的50%代表半径为50% ，后面的 50% 50% 代表圆心的位置。

image (8).png

## 基本图形：ellipse 按椭圆剪裁，语法`clip-path: ellipse(50px 60px at 0 10% 20%)`; at 前参数为圆心位置，at后面参数为椭圆半径。椭圆就是基于圆形变化而来，参数含义结构都是类似的，只是半径不是一个值。

image (9).png

## 基本图形：polygon 按多边形剪裁，语法 `clip-path: polygon(30% 50%，20% 10% ，20% 10%)`,每个具体的点位之间用『逗号』分割，每个具体的点位由（x y）组成；点位个数不限。以三角形为例说明具体数值含义：

也正是因为 `polygon` 点位数不限的灵活性，可实现多种形状的剪裁，例如五角星，多边形等。 ``` /*五角星*/ clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); /*五边形*/ clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); ``` 具体数值可不用自己计算，[推荐网站](https://bennettfeely.com/clippy/) 可以快速切出一些基本的图形，并附上具体数值。在项目中，经常有类似`导航折叠功能`的按钮，学以致用，就不需要在用切图来实现啦~

image (10).png

``` .btn { width: 30px; height: 120px; background-color: #ddd; clip-path: polygon(100% 0, 100% 100%, 0 80%, 0 20%); display: flex; justify-content: center; align-items: center; } .icon { width: 10px; height: 15px; background-color: rgb(180, 178, 178); clip-path: polygon(0 50%, 100% 0, 100% 100%); } ``` # 兼容性

image (11).png

# 一些好看的实现网站推荐发现一个纯 `clip-path` 实现的一个比较炫酷的网站，利用三角形拼接多种生物形状 [http://species-in-pieces.com/](http://species-in-pieces.com/) # 参考文章 [https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) [https://segmentfault.com/a/1190000023301221](https://segmentfault.com/a/1190000023301221) [https://juejin.cn/post/7088977301722890277](https://juejin.cn/post/7088977301722890277)