用clip-path裁剪出三角形。现代css技巧。
哈喽哈喽，我是你们的金樽清酒。我们都知道，作为一个前端，css是必不可少的。css可以说是十分考验一个前端的功底，它就像一个魔术一样，给一个网站注入灵魂。相信大家都喜欢魔术的那种神秘的感觉，现在让我们也挥动手中的魔术棒，来一场酣畅淋漓的魔术吧。(声明：这是看大漠老师的小册学习的)
魔术的关键clip-path
我先了解一下clip-path这个属性吧。
简单的说，这个属性能让我们裁剪出我们需要的内容。我们只需要给出对应的参数即可。但是能，今天我们要用到的是clip-path的ploygon函数。
可以看到，用clip-path的ploygon函数，你只需要确定好所需图形的坐标，就能裁切出需要的图形。 举个例子。我要裁剪出一个三角形。那我只需要知道三个点的坐标。（0 50%），（0，100%），（100% 100%），以盒子的左上角为坐标原点。向左为x正方向，向下为y轴正方向。
.easy-angle{
width: 30vmin;
aspect-ratio: 1;
clip-path: polygon(50% 0 ,0 100%,100% 100%);
background-color: aqua;
}
这是css样式，html结构只有一个带类名的盒子。是不是很神奇，这样我们就裁切出来了一个三角形。解释一下vmin这个单位，取视口高度较小的那一个的百分比，也就是30vmin就是相对于视口宽度较小的那一个的百分之三十。aspect-ratio: 1;这个属性是宽高比。这样我嫩就定义了盒子的宽高。clip-path: polygon(50% 0 ,0 100%,100% 100%);这一行就是我们的裁剪属性啦。ok，理论形成，开始实践。大漠老师呀教我们呢画各种各样的三角形，也就是说带我们去找各种各样的坐标，抓住重点。
画各种各样的三角形
等腰三角形
-
那我们要怎么裁剪一个等腰三角形呢？那肯定也是要找到三个点的坐标位置啦？就像上面那个例子，其实就是等腰三角形。最上面那个点的横坐标，就是底边长的一半。
-
顶点不在元素的边上，有一定的距离。这个时候我们该怎么办呢？（还是一样，找到坐标点）
如图所示，我们不确定的点，就是这个A点，A点的坐标怎么确定，比如就上顶的距离是s，那么它的坐标就是（w/2 s/h）。
.triangle {
--w: 300;
--h: 300;
--s: 30;
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
clip-path: polygon(50% calc(var(--s) / var(--h) * 100%), 100% 100%, 0 100%);
}
我们可以用变量的形式，方便做后续的更改。
等边三角形
经过分析我们可以根据等边三角形的特性，得到p点的坐标点。然后确定三个点，裁剪出等边三角形。 大致代码如下所示
.triangle--equilateral {
--w: 50;
--a: 60deg;
--h: calc(var(--w) * sqrt(3) / 2); /* 或者 calc(sin(var(--a)) * var(--w)) */
width: calc(var(--w) * 1vmin);
aspect-ratio: 1;
clip-path: polygon(50% calc((var(--w) - var(--h)) / var(--w) * 100%), 100% 100%, 0 100%); }
上述代码还可以优化，将计算出来的h作为元素的高
--w:50vmin;
--h:calc(var(--w) * sqrt(3) / 2);
width: var(--w); aspect-ratio: calc(1 / sqrt(3) * 2); /* 或 calc( 1 / sin(var(--a))) 或 calc(1 / cos(30deg))*/
clip-path: polygon(50% 0, 100% 100%, 0 100%);
或者用计算出来的高重置宽高比
.triangle {
--w: 50vmin;
--a: 60deg;
width: var(--w);
aspect-ratio: calc(1 / sqrt(3) * 2); /* 或 calc( 1 / sin(var(--a))) 或 calc(1 / cos(30deg))*/
clip-path: polygon(50% 0, 100% 100%, 0 100%); }
这样等边三角形就画完啦。
边框三角形
有时候我们需要完成一个三角形镂空的效果，像是一个三角形边框一样，这样我们该怎么去实现呢？
类似于这样的效果。（此图取自大漠的小册）
还是一样的我们需要去找点的坐标，然后用clip-path的ploygon去裁剪，那我们需要几个点呢？有人说外边三个，里面三个，所以是六个，不对，其实是八个点，还有点重重合，然后裁剪出一个封闭的图形。 所以大致就是外层四个点，内层四个点。
代码大致就是这样
.triangle--border {
clip-path: polygon( /* 外部坐标点 */ P1, P2, P3, P1, /* p4 与 P1 重叠，P4 = P1 */
/* 内部坐标点 */ P5, P6, P7, P5 /* P8 与 P5 重叠， P8 = p5 */ )
}
那我们首先需要确定，边框的厚度，然后根据三角函数去计算各个点的坐标，用clip-path的ploygon裁剪即可。那我们怎么去计算呢。大漠老师的这张图就很生动的给了我们答案。已知b的值就能求到各个点的坐标了。例如p6点的坐标就是(p2-c，p2-a)
大致代码
.triangle--border {
--b: 25px; /* 控制边框厚度 */
--w: 50vmin;
--p1: 50% 0;
--p2: 100% 100%;
--p3: 0 100%;
--p5: 50% var(--b);
--p6: calc(var(--b) * cos(30deg)) calc(100% - var(--b) * sin(30deg));
--p7: calc(100% - var(--b) * cos(30deg)) calc(100% - var(--b) * sin(30deg));
width: var(--w);
aspect-ratio: 1 / cos(30deg);
clip-path: polygon( /* 外部的点 */ var(--p1), var(--p2), var(--p3), var(--p1), /* p4 = p1 */ var(--p5), var(--p6), var(--p7), var(--p5) ); }
这样一个边框三角形就完成啦。
圆角三角形
在很多的ui界面中，我们都能看到圆角三角形的影子，可以说运用的很广泛。
（该图也来自大漠老师的demo）
比如左上角的收藏图标。那怎么去实现呢。其实可以利用ploygon函数的坐标可以超出这个特性，在裁剪的时候超出一点，104%。
（这也是大漠老师的图解）
代码
.element { clip-path: polygon(0 0, 100% 0, 104% 0, 0% 104%); }
这样就可以裁剪出一个圆角三角形。别忘了让原始的div设置圆角属性哦。
总结
利用clip-path的ploygon方法，可以根据坐标点裁剪出我们想要的形状，然后我们可以根据三角函数，或一些魔法数字来裁剪出我们需要的三角形。（这篇文章是根据阅读大漠老师的小册的自我学习文章，感兴趣的可以看看大漠老师的小册，更加的详细）
