如何解决按钮的多边形边框/边框半径
我正在尝试制作如下图所示的多边形边框形状。
我试过的代码如下。
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
.p-button{
background: transparent;
text-decoration: none;
background: #5344c6;
color: white;
padding: 15px 50px;
border-radius: 27px;
text-transform: uppercase;
font-family: "Poppins";
letter-spacing: 0.5px;
}
body{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
<a class="p-button" href="">Explore The Tech</a>
解决方法
使用剪辑路径:
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
.p-button{
background: transparent;
text-decoration: none;
background: #5344c6;
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="">Explore The Tech</a>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。