按钮的多边形边框/边框半径答案

【问题标题】：Polygon border / border radius of a button按钮的多边形边框/边框半径
【发布时间】：2021-10-01 01:49:14
【问题描述】：

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

我试过的代码如下。

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

&lt;a class="p-button" href=""&gt;Explore The Tech&lt;/a&gt;

【问题讨论】：

看看bennettfeely.com/clippy，它应该可以帮助您创建剪辑路径 CSS 规则。

标签： html css css-shapes

【解决方案1】：

使用剪辑路径：

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

&lt;a class="p-button" href=""&gt;Explore The Tech&lt;/a&gt;

【讨论】：

我不知道这可以通过剪辑路径实现。谢谢，它有效。有什么方法可以理解代码是如何实现的？
@FossBytes 你的形状由 14 个点组成，所以我只是指定了剪辑路径内的每个点，其他一切都与数学有关。我添加了有关某些特定值的详细信息。不确定你是否熟悉数学，但如果你熟悉的话，如果你逐点遵循代码，你可以很容易地理解逻辑
如果我们需要一个具有精确多边形边框的透明背景var(--borderwidth)。我该怎么做？
@FossBytes 你需要一个完全不同的代码，上面那个对你没有帮助