css html arrow

<style>
.parts{
    position:absolute;
    width:200pt;height:100pt;
    border:2pt solid gray;
}
.arrow-to-right{
    transform: perspective(200px) rotateX(60deg);
    border-left:0pt;border-top:0pt;
    
    padding-left:10pt;
 }
.arrow-to-down{
    transform: perspective(200px) rotateY(-60deg);
    border-left:0pt;border-top:0pt;
}
.arrow-straight-to-right{  
     height:0pt;
}
.arrow-straight-to-right::after{
     content:"";
     position:absolute;

     border:16pt solid  transparent;
     border-left:16pt solid  gray;
     top:-16pt;
     right:-32pt;
     height:0pt;
}
.arrow-curve-to-right{
     height:200pt;
     border-width:0;
     border-top-width:1pt;
     border-radius:50% / 10%;
     transform:rotate(-30deg);
}
.arrow-curve-to-right::after{
     content:"";
     position:absolute;

     border:16pt solid  transparent;
     border-left:16pt solid  gray;
     top:8pt;
     right:-8pt;
     height:0pt;
     transform: rotate(30deg);
}
</style>
<div style="position:relative;">
  <div class="parts arrow-to-right" style="width:120pt;height:16pt;left:120pt;top:20pt;">checkout</div>
  <div class="parts arrow-to-down" style="width:16pt;height:120pt;left:220pt;top:60pt;"></div>
  <div class="parts arrow-straight-to-right" style="left:120pt;top:210pt;">straight tp right</div>
  <div class="parts arrow-curve-to-right" style="left:150pt;top:280pt;"></div>
</div>