html - 具有透明背景的按钮的多边形边框

Question

我正在尝试制作一个如下图所示的多边形边框形状，但具有透明背景。

我尝试过的代码如下。代码中，一共有28个点。首先从左边的一点沿顺时针方向，然后从同一点沿逆时针方向。

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.p-button{
  text-decoration: none;
  background: transparent;
  color: white;
  padding: 14px 50px;
  text-transform: uppercase;
  font-family: "Poppins";
  border: solid 1px black;
  border-radius: 30px;
  font-size:12px;
  --b: 1px; /* border width */
  --h:25px; /* this is half the height, adjust it based on your code */
  clip-path:polygon(
    
    /* 1st to 14th point in anticlockwise direction */
    0 50%,
    calc(0.134*var(--h))  25%,   /* 0.134 = 1 - cos(30)   */
    calc(  0.5*var(--h))  6.7%,  /* 6.7% = 0.134/2 * 100% */
    var(--h) 0,
    calc(100% - var(--h)) 0,
    calc(100% - 0.5*var(--h))   6.7%,
    calc(100% - 0.134*var(--h)) 25%,
    100% 50%,
    calc(100% - 0.134*var(--h)) 75%,
    calc(100% - 0.5*var(--h))   93.3%, /* 93.3% = 100% - 6.7% */
    calc(100% - var(--h)) 100%,
    var(--h) 100%,
    calc(  0.5*var(--h))  93.3%,
    calc(0.134*var(--h))  75%,
    
    
    /* 15th to 28th point in anticlockwise direction */
    calc((0.134*var(--h)) + var(--b))  75%,
    calc((0.5*var(--h)) + var(--b))  93.3%,
    var(--h) calc(100% - var(--b)),
    calc(100% - var(--h)) calc(100% - var(--b)),
    calc(100% - (0.5*var(--h) + var(--b)))   93.3%, /* 93.3% = 100% - 6.7% */
    calc(100% - (0.134*var(--h) + var(--b))) 75%,
    calc(100% - var(--b)) 50%,
    calc(100% - (0.134*var(--h) + var(--b))) 25%,
    calc(100% - (0.5*var(--h) + var(--b)))   6.7%,
    calc(100% - var(--h)) var(--b),
    var(--h) calc(0px + var(--b)),
    calc(  (0.5*var(--h)) + var(--b))  6.7%,  /* 6.7% = 0.134/2 * 100% */
    calc((0.134*var(--h)) + var(--b))  25%,   /* 0.134 = 1 - cos(30)   */
    var(--b) 50%) ;
}

body{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  
}

<a class="p-button" href="">Demo it</a>

我引用的背景色按钮(不透明)的代码来自this link .

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.p-button{
  text-decoration: none;
  background: #000;
  color: white;
  padding: 15px 50px;
  text-transform: uppercase;
  font-family: "Poppins";
  font-size:40px;
  --h:45px; /* this is half the height, adjust it based on your code */
  clip-path:polygon(
    0 50%,
    calc(0.134*var(--h))  25%,   /* 0.134 = 1 - cos(30)   */
    calc(  0.5*var(--h))  6.7%,  /* 6.7% = 0.134/2 * 100% */
    var(--h) 0,
    calc(100% - var(--h)) 0,
    calc(100% - 0.5*var(--h))   6.7%,
    calc(100% - 0.134*var(--h)) 25%,
    100% 50%,
    calc(100% - 0.134*var(--h)) 75%,
    calc(100% - 0.5*var(--h))   93.3%, /* 93.3% = 100% - 6.7% */
    calc(100% - var(--h)) 100%,
    var(--h) 100%,
    calc(  0.5*var(--h))  93.3%,
    calc(0.134*var(--h))  75%);
}

body{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  
}

<a class="p-button" href="">Demo it</a>

Answer 1

你的想法很好，但你需要修正数学问题，这是这里最复杂的部分。

您会注意到这也会影响内容，因此我将其添加为伪元素以避免这种情况:

.p-button {
  position:relative;
  padding: 14px 50px;
  font-size:45px;
  text-decoration:none;
}

.p-button:before{
  content:"";
  position:absolute;
  inset:0;
  background:black;
  --b: 4px; /* border width */
  --h:34px; /* this is half the height, adjust it based on your code */
  --b1: calc(0.866*var(--b));
  --b2: calc(0.5*var(--b)); 
  clip-path:polygon(
    
    0 50%,
    calc(0.134*var(--h))  25%,   /* 0.134 = 1 - cos(30)   */
    calc(  0.5*var(--h))  6.7%,  /* 6.7% = 0.134/2 * 100% */
    var(--h) 0,
    calc(100% - var(--h)) 0,
    calc(100% - 0.5*var(--h))   6.7%,
    calc(100% - 0.134*var(--h)) 25%,
    100% 50%,
    calc(100% - 0.134*var(--h)) 75%,
    calc(100% - 0.5*var(--h))   93.3%, /* 93.3% = 100% - 6.7% */
    calc(100% - var(--h)) 100%,
    var(--h) 100%,
    calc(  0.5*var(--h))  93.3%,
    calc(0.134*var(--h))  75%,
    0 50%,
    
    var(--b) 50%,
    calc(0.134*var(--h) + var(--b1))  calc(75% - var(--b2)),
    calc(  0.5*var(--h) + var(--b2))  calc(93.3% - var(--b1)),
    var(--h) calc(100% - var(--b)),
    calc(100% - var(--h)) calc(100% - var(--b)),
    calc(100% - 0.5*var(--h)  - var(--b2))  calc(93.3% - var(--b1)),
    calc(100% - 0.134*var(--h) - var(--b1)) calc(75% - var(--b2)),
    calc(100% - var(--b)) 50%,
    calc(100% - 0.134*var(--h) - var(--b1)) calc(25% + var(--b2)),
    calc(100% - 0.5*var(--h)  - var(--b2))  calc(6.7% + var(--b1)),
    calc(100% - var(--h)) var(--b),
    var(--h) var(--b),
    calc(  0.5*var(--h) + var(--b2))  calc(6.7% + var(--b1)),  
    calc(0.134*var(--h) + var(--b1))  calc(25% + var(--b2)),   
    var(--b) 50%) ;
}

body{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background:linear-gradient(45deg,red,lightblue);
}

<a class="p-button" href="">Demo it</a>