问题描述
我正在尝试制作如下图所示的多边形边框形状，但背景是透明的。
我试过的代码如下。在代码中，共有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)) 75%);
}
body{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}<a class="p-button" href="">Demo it</a>解决方法
你的想法很好，但你需要解决数学问题，这是这里的复杂部分。
您会注意到这也会影响内容，因此我将其添加为伪元素以避免这种情况：
.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>这里你需要的是 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%,3% 75%,10% 90%,20% 100%,80% 100%,90% 94%,97% 78%,97% 20%,90% 6%,80% 0); clip-path: polygon(20% 0,80% 0);
}
.border{
width:264px;
height:98px;
background-color:black;
display: flex;
align-items: center;
justify-content: center;
-webkit-clip-path: polygon(20% 0,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>您无法直接从剪辑工具中获得所需的功能。因为它们是为其他目的而制造的。
一种解决方法是：
.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%,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%,79.82051% 18.34936%);
}<div class="polygon">
<img src="http://lorempixel.com/g/600/400/">
</div>或者可能有两个裁剪多边形在彼此之上以模仿透明度。如需更多详细信息，请参阅this post。