css-实现上下左右三角形

HTML:

 <!-- 上 -->
      <p class="d1"></p>
 <!-- 下 -->
      <p class="d2"></p>
 <!-- 左 -->
      <p class="d3"></p>
<!-- 右 -->
      <p class="d4"></p>

CSS:

 .d1{
    width: 0;
    height: 0;
    border-width: 0.5rem;
    border-style: solid;
    border-color: transparent transparent red transparent;
  }
  .d2{
    width: 0;
    height: 0;
    border-width: 0.5rem;
    border-style: solid;
    border-color: green transparent transparent transparent;
  }
  .d3{
    width: 0;
    height: 0;
    border-width: 0.5rem;
    border-style: solid;
    border-color: transparent blue transparent transparent;
  }
  .d4{
    width: 0;
    height: 0;
    border-width: 0.5rem;
    border-style: solid;
    border-color: transparent transparent transparent pink ;
    margin-left: 1rem;
    margin-top: -1rem;
  }