三角边框-实心/镂空

实心边框

.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;
}

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

镂空

.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>