具有透明背景的按钮的多边形边框答案

【问题标题】：Polygon border of a button with transparent background具有透明背景的按钮的多边形边框
【发布时间】：2021-10-02 01:27:17
【问题描述】：

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

我尝试过的代码如下。代码中一共有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;
  
}

&lt;a class="p-button" href=""&gt;Demo it&lt;/a&gt;

我为带有背景颜色（不透明）的按钮引用的代码来自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;
  
}

&lt;a class="p-button" href=""&gt;Demo it&lt;/a&gt;

【问题讨论】：

是否有理由不使用 SVG 进行绘图？（如果你也想剪裁形状，稍微向外做？）
我试过了，但是 SVG 不像按钮那样响应。在 SVG 中，很难单独控制 padding-left、right、top 和 bottom。
我在考虑使用 svg 作为背景，或者在按钮后面绘制，而不是它还包含文本和填充。

标签： html css css-shapes clip-path

【解决方案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);
}

&lt;a class="p-button" href=""&gt;Demo it&lt;/a&gt;

【讨论】：

这太棒了，我没想到。有没有更简单的方法来实现这种边框，也许是通过我不知道的其他 CSS 属性？
@FossBytes 不是，这可能是最合适的 CSS 解决方案。任何其他 CSS 解决方案都将具有相同（或更多）的复杂性。
另外，你是怎么想出两个按钮中剪辑路径的公式的？任何想法？ .我想了解更多。
@FossBytes 一支笔、一张纸和一些数学背景。您在一个圆圈中绘制了 8 个点，因此通过一些三角函数我们可以获得值（一些 sin() 和 cos()）。如果有机会，我稍后会尝试编辑帖子，但我不能保证（绘制数字和解释需要时间）

【解决方案2】：

这里你需要Clipping tool 当使用剪裁时，边框也会被剪裁，所以为了获得边框，我们需要在背景中添加一个带有所需边框颜色的 div 并剪裁..但是你不能用这种方法实现透明边框

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

.p-button{
  text-decoration: none;
  background: white;
  color: black;
  padding: 15px 50px;
  text-transform: uppercase;
  font-family: "Poppins";
  font-size:40px;
  width:260px;
height:94px;
  
 

-webkit-clip-path: polygon(20% 0, 10% 7%, 3% 23%, 0 50%, 3% 75%, 10% 90%, 20% 100%, 80% 100%, 90% 94%, 97% 78%, 100% 50%, 97% 20%, 90% 6%, 80% 0); clip-path: polygon(20% 0, 10% 7%, 3% 23%, 0 50%, 3% 75%, 10% 90%, 20% 100%, 80% 100%, 90% 94%, 97% 78%, 100% 50%, 97% 20%, 90% 6%, 80% 0);

}
.border{
width:264px;
height:98px;
background-color:black;
 display: flex;
 
  align-items: center;
  justify-content: center;

-webkit-clip-path: polygon(20% 0, 10% 7%, 3% 23%, 0 50%, 3% 75%, 10% 90%, 20% 100%, 80% 100%, 90% 94%, 97% 78%, 100% 50%, 97% 20%, 90% 6%, 80% 0); clip-path: polygon(20% 0, 10% 7%, 3% 23%, 0 50%, 3% 75%, 10% 90%, 20% 100%, 80% 100%, 90% 94%, 97% 78%, 100% 50%, 97% 20%, 90% 6%, 80% 0);
}
*{box-sizing: border-box;}
body{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  
}

&lt;div class="border"&gt;&lt;a class="p-button" href=""&gt;Demo it&lt;/a&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

您无法直接从剪辑工具中获得所需的功能。因为它们是为其他目的而制造的。

解决方法是：

.polygon {
  display: inline-block;
  position: relative;
  width: 150px;
  height: 150px;
  background: red;
  box-sizing: border-box;
  -webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
  clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
}
.polygon img {
  position: absolute;
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  width: 146px; /* container height - (border thickness * 2) */
  height: 146px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
  clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
}

<div class="polygon">
  <img src="http://lorempixel.com/g/600/400/">
</div>

或者可能有两个相互重叠的剪切多边形来模拟透明度。更多详情请参考this post。

【讨论】：