按钮的多边形边框/边框半径 [英] Polygon border / border radius of a button

问题描述

我正在尝试制作如下图所示的多边形边框形状.

我试过的代码如下.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');.p 按钮{背景:透明；文字装饰:无；背景:#5344c6；白颜色;填充:15px 50px；边界半径:27px；文本转换:大写；字体系列:流行音乐"；字母间距:0.5px；}身体{显示:弹性；高度:100vh；对齐项目:居中；对齐内容:居中；}

<a class="p-button" href="">探索技术</a>

解决方案

使用剪辑路径:

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');.p 按钮{背景:透明；文字装饰:无；背景:#5344c6；白颜色;填充:15px 50px；文本转换:大写；字体系列:流行音乐"；字体大小:40px；--h:45px;/* 这是高度的一半，根据你的代码调整它 */剪辑路径:多边形(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,计算(100% - var(--h)) 0,计算(100% - 0.5*var(--h)) 6.7%,计算(100% - 0.134*var(--h)) 25%,100% 50%,计算(100% - 0.134*var(--h)) 75%,calc(100% - 0.5*var(--h)) 93.3%,/* 93.3% = 100% - 6.7% */计算(100% - var(--h)) 100%,var(--h) 100%,计算(0.5*var(--h))93.3%，计算(0.134*var(--h))75%)；}身体{显示:弹性；高度:100vh；对齐项目:居中；对齐内容:居中；}

<a class="p-button" href="">探索技术</a>

I am trying to make polygon border shape like image below.

The code i have tried is below.

@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>

解决方案

Use clip-path:

@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>

这篇关于按钮的多边形边框/边框半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！