如何实现带边框、背景透明的clip-path自定义形状

我一直尝试制作带边框、背景透明的自定义形状。

• 最初尝试使用transform skew实现，无法得到预期的形状效果
• 试验了clip-path方案，首次尝试就实现了基于高度控制角度和右侧内边距的效果，这一优势让我更倾向于使用该方案，但无法为其添加边框
• 查到的形中套形实现方案虽然能得到想要的形状，但无法实现透明背景

如果有开发者知道如何修改现有代码实现需求，或是有其他未想到的实现思路，麻烦告知，非常感谢。

预期效果 #

现有测试代码 #

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    :root {
      --cta-height: 60px;
      --cta-angle: calc(var(--cta-height) - 20px);
      --cta-side-padding: 40px;
      --cta-height-inner: calc(var(--cta-height) - 4px);
      --cta-angle-inner: calc(var(--cta-height-inner) - 20px);
    }

    .img1 {
      background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
    }

    .bk-image {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      padding: 50px;
    }
    /* 方案1：基于高度调整角度和右侧内边距 */

    .cta {
      clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
      -webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
      display: flex;
      align-items: center;
      height: var(--cta-height);
      padding-right: calc(var(--cta-angle) + var(--cta-side-padding));
      padding-left: var(--cta-side-padding);
      margin-bottom: 50px;
    }

    .cta__ora {
      border: 2px solid orange;
      color: #ffffff;
    }

    .flex-p {
      display: flex;
      align-content: center;
    }
    /* 方案2 */

    .outside {
      position: relative;
      background: tomato;
      clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
      -webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
      height: var(--cta-height);
      padding-right: calc(var(--cta-angle) + var(--cta-side-padding));
      padding-left: var(--cta-side-padding)
    }

    .inside {
      position: absolute;
      top: 4px;
      left: 4px;
      right: 4px;
      bottom: 4px;
      background: white;
      clip-path: polygon(0% 0%, calc(100% - 4px) 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
      -webkit-clip-path: polygon(0% 0%, calc(100% - 4px) 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
    }
  </style>
</head>
<body>
  <div class="bk-image img1 ">
    <div class="flex-p">
      <a class="cta cta__ora">clip path angle adjust from the height</a>
    </div>
    <div class="outside">
      <div class="inside">
        hello
      </div>
    </div>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者mike