H5通过js拨打电话、以及梯形圆角效果记录

在需要里遇到了这个问题，记录下随笔。
常用的拨打电话方法。
<a href="tel: 11111111111">点我拨打电话</a>
而在这次开发需求时，有个特殊场景是：
需要先使用id调用后端接口拿到手机，然后才开始拨打。
这如何操作？通过动态创建a标签解决。

  // virtualPhone 为后端接口返回的的用户手机号。
  let a = document.createElement('a') // 创建a标签
  a.setAttribute('href', `tel: ${virtualPhone}`) // 设置href属性为打电话
  a.setAttribute('id', 'telMedicine') // 设置a标签的id属性，这里一定要注意 别添加_blank属性，加了在手机上无法拨打电话。
  // 删除已有的a标签， 防止反复添加a标签
  if (document.getElementById('telMedicine')) {
    document.body.removeChild(document.getElementById('telMedicine'))
  }
  document.body.appendChild(a) // 将a标签添加到页面上
  a.click()

<div>梯形圆角效果<div>

<style>
    width: 250px;
    height: 80px;
    background-color: #FFC800;
    color: #FFF;
    font-size: 30px;
    margin: 50px;
    text-align: center;
    line-height: 80px;
    border-radius: 15px;
    transform: perspective(100px) rotateX(5deg);
    transform-origin: bottom;
</style>