css画三角形的两种方法

画三角形

1 border

<div class="left-down-small" />
<div class="left-down-large" />
<style scoped>
.left-down-small {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent var(--color-background-second) transparent;
    border-width: 0 700px 260px 0;

    position: fixed;
    top: 100%;
    transform: translate(0, -100%);
    z-index: 1;
  }
  .left-down-large {
    width: 0;
    height: 0;
    border-style: solid;
    /*border-color: transparent transparent linear-gradient(to right, #24223D, var(--color-background)) transparent;*/
    border-color: transparent transparent #24223D transparent;
    border-width: 0 700px 400px 0;

    position: fixed;
    top: 100%;
    transform: translate(0, -100%);
  }
</style>

左下角的三角形：

<div class="right-top-small" />
<script scoped>
  .right-top-small {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #282441 transparent transparent transparent;
    /*border-color: red transparent transparent transparent;*/
    border-width: 200px 0 0 320px;

    position: fixed;
    left: 100%;
    transform: translate(-50%, 0);
    z-index: 100;
  }
</script>

右上角的三角形：

2 css的clip-path

http://tools.jb51.net/code/css3path

css的clip-path是裁剪盒子，100%width是盒子的宽度，非常好用，可以配合background-image做渐变色。如下：

左下角的三角形：

<div class="left-down-small" />
<div class="left-down-large" />
<style scoped>
.left-down-small {
    width: 700px;
    height: 260px;
    background-image: linear-gradient(to right, var(--color-background-second), var(--color-background-second));
    clip-path: polygon(0 100%, 0 0, 100% 100%);

    position: fixed;
    top: 100%;
    transform: translate(0, -100%);
    z-index: 1;
  }
  .left-down-large {
    width: 700px;
    height: 400px;
    background-image: linear-gradient(to right, var(--color-background-second-a), var(--color-background-second-a));
    clip-path: polygon(0 100%, 0 0, 100% 100%);

    position: fixed;
    top: 100%;
    transform: translate(0, -100%);
  }
</style>

右上角的三角形：

<div class="right-top-small" />
<script scoped>
  .right-top-small {
    width: 320px;
    height: 200px;
    background-image: linear-gradient(to right, var(--color-background-second), var(--color-background));
    clip-path: polygon(0 0, 100% 0, 100% 100%);

    position: fixed;
    left: 100%;
    transform: translate(-50%, 0);
    z-index: 100;
  }
    
  .right-top-large 
    width: 375px;
    height: 315px;
    background-image: linear-gradient(to right, var(--color-background-second-a), var(--color-background));
    clip-path: polygon(0 0, 100% 0, 100% 100%);

    position: fixed;
    left: 100%;
    transform: translate(-50%, 0);
  }
</script>