html - 具有透明背景的按钮的多边形边框
问题描述
我尝试过的代码如下。代码中一共有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>
解决方案
你的想法很好,但你需要修复这里的复杂部分的数学。
您会注意到这也会影响内容,因此我将其添加为伪元素以避免这种情况:
.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>
推荐阅读
- firebase - 数据功能不起作用反应本机 Firestore
- tkinter - 如何以 .png 格式保存画布屏幕(tkinter)?
- javascript - WKWebView,使用javascript提交表单
- project - 如何重用 Qbs 项目的属性?
- css - 如何轻松匹配多个子类名称?
- wpf - 从 Windows Form/WPF 访问 PowerShell 的 office 365 身份验证弹出窗口
- mysql - 匹配两组数字是否相等
- javascript - 如何重复使用 cookie,以便网站知道我已经接受了这些条款?
- amazon-web-services - 来自 EC2 和 Lambda 的 AWS S3 访问被拒绝
- c# - Canvas.children: System.ArgumentException: '指定的索引已在使用中。首先断开指定索引处的 Visual 子级。