带有边框和透明背景/剪辑路径的自定义形状

Question

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

最初的方法，我尝试过使用 transfrom skew，但这不能给我想要的形状。

我也一直在试验剪辑路径，我的第一次尝试是根据高度和正确的填充来控制角度，这是一个好处。出于这个原因，我更愿意使用它，但不幸的是，在它上面加上边框不起作用。

我在网上发现了一些关于形状内有形状的信息，但后来我没有清晰的背景，但它是我想要的形状。

如果有人知道我如何创建这个形状，要么修改我尝试使用的代码，要么使用一种我没有想到的不同方法，那就太好了。

对于视觉参考，这是我正在努力实现的目标。

<!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;
    }
    /* attemp one with angle and right padding based off of the height */
    
    .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;
    }
    /* attemp two */
    
    .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>

Answer 1

您可以稍微使用 ::after 并像斜线一样放置

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

.inside {
  height: 50px;
  width: 300px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  clip-path: polygon(0 0, 100% 0%, 89% 100%, 0% 100%);
}

.inside::after {
  content: "";
  position: absolute;
  height: 65px;
  width: 300px;
  top: -2px;
  right: -1.5px;
  border-right: 2px solid black;
  transform: rotate(31.8deg);
  transform-origin: right top;
}

<div class="inside">
  Find out more
</div>

带有边框和透明背景/剪辑路径的自定义形状

custom shape with a border and transparent background / clip path

html

css

transform

shapes

clip-path