一、css画各种三角形的原理

1、基础原理

当div宽度为0，高度为0的时候，只设置border的大小和四边不同颜色可看到下图，只保留一边的颜色，另外三边的颜色设置为transparent可得到一个方向的三角形。因此，可延伸出设置一边的border的颜色，相邻两边的border设置为transparent可得到一个方向的三角形。

CSS三角形绘制 - 得得哎 - 图1

  1. <div id="triangle"></div>
  2. <style>
  3.     #triangle{
  4.         width: 0;
  5.         height: 0;
  6.         border: 100px solid;
  7.         border-top-color: #000;
  8.         border-right-color: red;
  9.         border-left-color: yellow;
  10.         border-bottom-color: blue;
  11.     }
  12. </style>

2、等腰锐角三角形

border的大小的值为三角形底边上的高，三角形的底为相邻两边的border的高的和，如下图所示的红色锐角三角形

CSS三角形绘制 - 得得哎 - 图2

  1. <div id="triangle"></div>
  2. <style>
  3.     #triangle{
  4.         width: 0;
  5.         height: 0;
  6.         border-left: 50px solid yellow;
  7.         border-right: 50px solid green;
  8.         border-bottom: 100px solid red;
  9.     }
  10. </style>

3、直角在正方形四个方向的直角三角形

若想实现直角三角形的效果，如下图所示直角在左上的三角形，按原理可设置上border和左border的颜色，另外两条边的颜色为transparent，此样式可简写为只设置上border的颜色，另一条相邻的右border为transparent

CSS三角形绘制 - 得得哎 - 图3

  1. <div id="triangle"></div>
  2. <style>
  3.     #triangle{
  4.         width: 0;
  5.         height: 0;
  6.         border: 100px solid;
  7.         border-top-color: red;
  8.         border-right-color: transparent;
  9.         border-left-color: red;
  10.         border-bottom-color: transparent;
  11.     }
  12. </style>
  14. //简写
  15. #triangle-top-left{
  16.     width: 0;
  17.     height: 0;
  18.     border-right: 100px solid transparent;
  19.     border-top: 100px solid red;
  20. }

4、其他奇形怪状三角形

你也许会遇到要画个奇怪三角形的时候，只要参考锐角三角形的方式，找到三角形底边和高，计算出三角形高和把相邻两条边的高相加作为底部，你可以画出各种各样的三角形，如果再加上角度旋转的css，你便啥三角形都能画！

CSS三角形绘制 - 得得哎 - 图4

  1. #triangle-weird{
  2.     width: 0;
  3.     height: 0;
  4.     border-left: 150px solid transparent;
  5.     border-right: 300px solid transparent;
  6.     border-bottom: 100px solid red;
  7.     transform: rotate(20deg);
  8. }

5、带边框的三角形/空心三角形

CSS三角形绘制 - 得得哎 - 图5

此类三角形解决思路通常使用两个不同颜色的三角形做颜色叠加，比如做如上图所示的边框为1px的红色边框白色底三角形，就先画一个红色三角形，再画一个尺寸少2px的白色底三角形，然后设置两个三角形的position将三角形重叠，这里使用伪元素实现

  1. #triangle-hollow{
  2.       width: 0;
  3.       height: 0;
  4.       border-left: 100px solid transparent;
  5.       border-right: 100px solid transparent;
  6.       border-bottom: 100px solid red;
  7.       position: relative;
  8.   }
  9.   #triangle-hollow:after{
  10.       content:'';
  11.       position: absolute;
  12.       top: 1px;
  13.       left: -98px;
  14.       width: 0;
  15.       height: 0;
  16.       border-left: 98px solid transparent;
  17.       border-right: 98px solid transparent;
  18.       border-bottom: 98px solid white;
  19.   }

6、对话框常用三角形及带阴影的效果

6.1 实现带边框的对话框三角形效果

此类效果需要用到两个伪元素，类似带边框的三角形的遮挡方式来实现
image.png

  1. .box:before{
  2.   content: '';
  3.   position: absolute;
  4.   width: 10px;
  5.   height: 10px;
  6.   left: 50%;
  7.   margin-left: 1px;
  8.   bottom: -9px;
  9.   z-index: 1;
  10.   width: 0;
  11.   height: 0;
  12.   border-left: 9px solid transparent;
  13.   border-right: 9px solid transparent;
  14.   border-top: 9px solid #fff;
  15. }
  16. .box:after{
  17.   content: '';
  18.   position: absolute;
  19.   left: 50%;
  20.   bottom: -10px;
  21.   width: 0;
  22.   height: 0;
  23.   border-left: 10px solid transparent;
  24.   border-right: 10px solid transparent;
  25.   border-top: 10px solid #999;
  26. }

6.2 对话框实现带阴影

如果上述的对话框要实现带阴影的效果，我们可以做一个与对话框背景相同颜色的正方形带阴影，并旋转45°得到一个三角形。
此处复习一下box-shadow的知识点，box-shadow是css3向框添加一个或多个阴影的属性，具体使用如下，
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影大小 颜色 inset内侧阴影或外侧;如使用多层阴影则每组参数逗号隔开。
image.png

  1. .box{
  2.     width: 200px;
  3.     height: 200px;
  4.     position: relative;
  5.     box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
  6. }
  7. .box:after{
  8.     content:'';
  9.     position: absolute;
  10.     width: 10px;
  11.     height: 10px;
  12.     transform: rotate(45deg);
  13.     left: 50%;
  14.     bottom: -5px;
  15.     background: #fff;
  16.     box-shadow: 3px 3px 7px rgba(0,0,0,.07);
  17. }

7、其他实现三角形的方式

7.1 clip-path

CSS 新属性 clip-path，意味裁剪路径的意思，让我们可以很便捷的生成各种几何图形。简单了解一下clip-path的基本用法：参考资料:https://blog.csdn.net/weixin_44116302/article/details/98882841
定义一个宽高为200px的区域，然后将底边为200px高为200px的三角形的三个点的坐标填入，就可得到一个三角形
image.png

  1. .clip{
  2.   width: 200px;
  3.   height: 200px;
  4.   background: palevioletred;
  5.   clip-path: polygon(50% 0%, 0% 200px, 200px 200px);
  6.   -webkit-clip-path: polygon(50% 0%, 0% 200px, 200px 200px);
  7. }

7.1 canvas

canvas绘制图形的参考资料：https://www.cnblogs.com/jarson-7426/p/6231767.html
image.png

  1. <canvas id="tri"></canvas>
  1. <script>
  2.   var triCanvas = document.getElementById('tri');
  3.   var ctx = triCanvas.getContext('2d')
  4.   var draw = function(x1, y1, x2, y2, x3, y3, color, type) {
  5.     ctx.beginPath();
  6.     ctx.moveTo(x1, y1);
  7.     ctx.lineTo(x2, y2);
  8.     ctx.lineTo(x3, y3);
  9.     ctx[type + 'Style'] = color;
  10.     ctx.closePath();
  11.     ctx[type]();
  12.   }
  13.   //传入三个点的坐标和颜色，实心为fill，空心为stroke
  14.   draw(50,50,75,75,50,100,'red','fill')
  15. </script>

二、常见三角形的实现

1、向上正箭头△

CSS三角形绘制 - 得得哎 - 图10

  1. #triangle-up{
  2.     width: 0;
  3.     height: 0;
  4.     border-left: 100px solid transparent;
  5.     border-right: 100px solid transparent;
  6.     border-bottom: 100px solid palevioletred;
  7. }

2、向下正箭头▽

CSS三角形绘制 - 得得哎 - 图11

  1. #triangle-down{
  2.     width: 0;
  3.     height: 0;
  4.     border-left: 100px solid transparent;
  5.     border-right: 100px solid transparent;
  6.     border-top: 100px solid palevioletred;
  7. }

3、向左正箭头▷

CSS三角形绘制 - 得得哎 - 图12

  1. #triangle-left{
  2.     width: 0;
  3.     height: 0;
  4.     border-left: 100px solid palevioletred;
  5.     border-bottom: 100px solid transparent;
  6.     border-top: 100px solid transparent;
  7. }

4、向右正箭头 ◁

CSS三角形绘制 - 得得哎 - 图13

  1. #triangle-right{
  2.     width: 0;
  3.     height: 0;
  4.     border-bottom: 100px solid transparent;
  5.     border-right: 100px solid palevioletred;
  6.     border-top: 100px solid transparent;
  7. }

5、向左上箭头 ◥

CSS三角形绘制 - 得得哎 - 图14

  1. #triangle-top-left{
  2.     width: 0;
  3.     height: 0;
  4.     border-right: 100px solid transparent;
  5.     border-top: 100px solid palevioletred;
  6. }

6、向右上箭头 ◤

CSS三角形绘制 - 得得哎 - 图15

  1. #triangle-top-right{
  2.     width: 0;
  3.     height: 0;
  4.     border-left: 100px solid transparent;
  5.     border-top: 100px solid palevioletred;
  6. }

7、向左下箭头 ◣

CSS三角形绘制 - 得得哎 - 图16

  1. #triangle-down-left{
  2.     width: 0;
  3.     height: 0;
  4.     border-right: 100px solid transparent;
  5.     border-bottom: 100px solid palevioletred;
  6. }

8、向右下箭头 ◢

CSS三角形绘制 - 得得哎 - 图17

  1. #triangle-down-right{
  2.     width: 0;
  3.     height: 0;
  4.     border-left: 100px solid transparent;
  5.     border-bottom: 100px solid palevioletred;
  6. }

三、附加其他形状的实现原理

1、梯形

我们知道，用border画三角形的时候设置了width为0和宽度为0，那么当宽度和高度相同但是大于0的时候如下图所示，可得到四个方向不同的梯形
image.png
固将其余三个方向的boder颜色变为transparent，可得一个方向的梯形
image.png

  1. #triangle {
  2.     width: 100px;
  3.     height: 50px;
  4.     border: 100px solid;
  5.     border-top-color: transparent;
  6.     border-right-color: transparent;
  7.     border-left-color: transparent;
  8.     border-bottom-color: palevioletred;
  9. }
  10. /*简写*/
  11. #triangle{
  12.   width: 100px;
  13.   height: 50px;
  14.   border-left: 100px solid transparent;
  15.   border-right: 100px solid transparent;
  16.   border-bottom: 100px solid palevioletred;
  17. }

2、五角星形

五角星形是可以由三个三角形旋转角度拼成的，具体旋转的角度由五角星的角度形成的直角三角形两条直角边长的比例来确定，即正五角星的角度是36度，两条直角边的比是tan36°，设三角形的高为X，底边就是X/tan36°,该实现方式计算困难不适用于高度还原设计稿的时候,建议在需要五角星的时候使用图标字体。
image.png

  1. .star {
  2.   width: 0;
  3.   height: 0;
  4.   border-top: 70px solid palevioletred;
  5.   border-right: 100px solid transparent;
  6.   border-left: 100px solid transparent;
  7.   position: relative;
  8. }
  9. .star:before {
  10.   content: '';
  11.   width: 0;
  12.   height: 0;
  13.   top: -70px;
  14.   right: -100px;
  15.   position: absolute;
  16.   transform: rotate(70.5deg);
  17.   border-top: 70px solid palevioletred;
  18.   border-right: 100px solid transparent;
  19.   border-left: 100px solid transparent;
  20. }
  21. .star:after {
  22.   content: '';
  23.   width: 0;
  24.   height: 0;
  25.   top: -70px;
  26.   right: -100px;
  27.   position: absolute;
  28.   transform: rotate(-70.5deg);
  29.   border-top: 70px solid palevioletred;
  30.   border-right: 100px solid transparent;
  31.   border-left: 100px solid transparent;
  32. }