透明背景按钮的多边形边框
Polygon border of a button with transparent background
我正在尝试制作一个多边形边框形状，如下图所示，但背景是透明的。
我试过的代码如下。代码中，一共有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>
我参考的带背景颜色（不透明）按钮的代码来自。
@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>
您无法直接从剪辑工具中获得所需的功能。因为它们是为其他目的而制作的。
解决方法是：
.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>
或者可能有两个裁剪多边形在彼此之上以模拟透明度。有关详细信息，请参阅 。
你需要的是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;
}
<div class="border"><a class="p-button" href="">Demo it</a></div>
你的想法很好，但你需要修正数学，这是这里比较复杂的部分。
你会注意到这也会影响内容所以我将它添加为伪元素来避免这种情况：
.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>
我正在尝试制作一个多边形边框形状，如下图所示，但背景是透明的。
我试过的代码如下。代码中，一共有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>
我参考的带背景颜色（不透明）按钮的代码来自
@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>
您无法直接从剪辑工具中获得所需的功能。因为它们是为其他目的而制作的。
解决方法是：
.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>
或者可能有两个裁剪多边形在彼此之上以模拟透明度。有关详细信息，请参阅
你需要的是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;
}
<div class="border"><a class="p-button" href="">Demo it</a></div>
你的想法很好，但你需要修正数学，这是这里比较复杂的部分。
你会注意到这也会影响内容所以我将它添加为伪元素来避免这种情况：
.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>