css实现各种各样的三角形

1. border三角形

设置div的width,height均为0，设置四面的border值，想要哪边的三角就设置哪边的border值，把其他边的border值设置为 transparent（透明）

css：

 div {
        width: 0;
        height: 0;
        margin: 10px;
      }
      .all {
        border-top: 50px solid #e6e6ae;
        border-left: 50px solid #ff976d;
        border-bottom: 50px solid #4ceff5;
        border-right: 50px solid #d664e6;
      }
      .left {
        border: 50px solid transparent;
        border-left: 50px solid #ff976d;
      }
      .bottom {
        border: 50px solid transparent;
        border-bottom: 50px solid #4ceff5;
      }
      .right {
        border: 50px solid transparent;
        border-right: 50px solid #d664e6;
      }
      .top {
        border: 50px solid transparent;
        border-top: 50px solid #e6e6ae;
      }

html：

 <div class="first">
      <div class="all"></div>
      <div class="left"></div>
      <div class="top"></div>
      <div class="right"></div>
      <div class="bottom"></div>
    </div>

这种一般用于消息框：

css：

 .big {
        width: 100px;
        height: 50px;
        border-radius: 10px;
        background-color: #f35496;
        position: relative;
      }
      .big::after {
        position: absolute;
        content: "";
        right: -20px;
        top: 10px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-left: 10px solid #f35496;
      }

html：<div class="big"></div>

2. linear-gradient 三角形

使用角度，使用渐变定格到50%，然后再把其中一半设置成transparent。

css：

.scoend {
        width: 100px;
        height: 100px;
        background: linear-gradient(
          45deg,
          rgb(233, 153, 196) 50%,
          rgb(119, 229, 243) 50%
        );
      }
      .example1 {
        margin-bottom: 10px;
        width: 100px;
        height: 100px;
        background: linear-gradient(
          45deg,
          rgb(233, 153, 196) 50%,
          transparent 50%
        );
      }
      .example2 {
        margin-bottom: 10px;
        width: 100px;
        height: 100px;
        background: linear-gradient(
          45deg,
          transparent 50%,
          rgb(153, 233, 233) 50%
        );
      }
      .example3 {
        margin-bottom: 10px;
        width: 100px;
        height: 100px;
        background: linear-gradient(
          135deg,
          transparent 50%,
          rgb(218, 191, 243) 50%
        );
      }
      .example4 {
        width: 100px;
        height: 100px;
        background: linear-gradient(
          135deg,
          rgb(243, 212, 191) 50%,
          transparent 50%
        );
      }

html：

    <div class="scoend"></div>
    <div class="example1"></div>
    <div class="example2"></div>
    <div class="example3"></div>
    <div class="example4"></div>

常用于选中下标，删除下标等

css：

 .item {
        width: 100px;
        height: 40px;
        background-color: #e4e4e4;
        text-align: center;
        line-height: 40px;
        position: relative;
      }
      .item::after {
        position: absolute;
        content: "";
        width: 6px;
        height: 3px;
        right: 2px;
        bottom: 4px;
        border: 1px solid #fff;
        border-color: transparent transparent #fff #fff;
        transform: rotate(-45deg);
      }
      .item::before {
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          transparent 50%,
          rgb(94, 129, 243) 50%
        );
      }

html：

   <div class="item">全部</div>

如果不想画这种等腰三角形，用渐变也可以画

只要利用高中数学的三角函数控制好宽高跟旋转的角度
css：

 .scoend {
        width: 173.2px;
        height: 100px;
        background: linear-gradient(
          30deg,
          rgb(233, 153, 196) 50%,
          rgb(119, 229, 243) 50%
        );
      } 

只是这种方式不太精确。

3.tramform+rotate 实现

 .third {
        width: 100px;
        height: 50px;
        background-color: #abcada;
        position: relative;
        overflow: hidden;
      }
      .third::before {
        position: absolute;
        width: 100px;
        height: 50px;
        background-color: violet;
        content: "";
        left: 0;
        bottom: 0;
        transform-origin: left bottom;
        transform: rotate(30deg);
      }

旋转后把溢出的隐藏，就能得到这样的三角形啦

4.canvas画图三角形

这种方法不太实用，了解一下就可以了，canvas画图可以画出各种各样的图形。

当你在三角形上右键点击时会显示图片另存为，会把canvas绘制的区域视为图片。
代码：

 <canvas id="tutorial" width="300" height="300"></canvas>
    <script>
      draw();
      function draw() {
        var canvas = document.getElementById("tutorial");
        if (!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(50, 50);
        ctx.lineTo(200, 50);
        ctx.lineTo(200, 200);
        ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
        ctx.stroke(); //描边。stroke不会自动closePath()
      }
      draw();
    </script>