<div class="container">
  <div>
    <div id="old-triangle"></div>
    <div class="label">use: <code>border</code></div>
  </div>
  <div>
    <div id="new-triangle"></div>
    <div class="label">use: <code>clip-path</code></div>
  </div>
</div>

:root {
  --color: #343a40;
}

body {
  display: grid;
  place-items: center;
}

.container {
  display: flex;
  gap: 3rem;
}

.label {
  margin-top: 0.25rem;
  text-align: center;
}

#old-triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid var(--color);
}

#new-triangle {
  height: 100px;
  width: 100px;
  background: var(--color);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}