三角边框-实心/镂空

实心边框

  .box-1 {
    width: max-content;
    margin: 0 auto;
    border-width: 0 30px 30px;
    /*border-color: transparent transparent black black;*/
    border-color: transparent transparent black;
    border-style: solid;
  }

镂空

  .box-2 {
    --width: 50px;
    margin-top: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 var(--width) var(--width) var(--width);
    position:relative;
    border-color: transparent transparent #fff transparent;
  }
  .box-2::after {
    --width: 52px;
    content: '';
    border-style: solid;
    border-width: 0 var(--width) var(--width) var(--width);
    border-color: transparent transparent #00adb5 transparent;
    position: absolute;
    left: -52px;
    top: -1px;
    z-index: -1;
  }

<section class="wrap">
  <div class="box-1 box-2"></div>
</section>