html - 按钮的多边形边框/边框半径
问题描述
我正在尝试制作如下图所示的多边形边框形状。
我尝试过的代码如下。
@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>
推荐阅读
- angular - 材料表分页器在一个巨大的页面上显示所有数据而不是分页
- java - 类型安全:ArrayList 类型的表达式需要未经检查的转换才能符合 ArrayList
? 这会引发 ClassCastException - node.js - 我如何使用配置 api 在云服务器 amazon s3 中上传 2gb 文件
- c# - 为什么实际上无法加载onnxruntime.dll?
- testing - 添加额外的逻辑只是为了使 qa 自动化更容易,这是一种好习惯吗?
- javascript - 在 React 中单击获取元素的书籍属性
- python - PyTesseract 没有在表中看到一些个位数的数字
- suricata - 在suricata IPS模式下访问特定端口的流量被丢弃时连接是否正常?
- android - 如何动态调试android native c/c++ log?
- swift - CIFilter 不能应用于 SCNMaterial