带圆 Angular 的 CSS 六边形按钮

Question

我可以使用 CSS 创建相同的按钮。圆 Angular 是重要的部分，圆 Angular 是主要原因。带圆 Angular 的三 Angular 形按钮，请看我下面的代码和图片

.lngbtn {
	position: relative;
	width: 150px;
	height: 50px;
	margin: 50px;
	color: #FFFFFF;
	background-color: #f4d046;
	text-align: center;
	line-height: 48px;
    padding: 16px;
	font-weight: bold;
}



.lngbtn:before {
    content:"";
    position: absolute;
    right: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:25px solid transparent;
    border-right:30px solid #f4d046;
    border-bottom:25px solid transparent;
}

.lngbtn:after {
    content:"";
    position: absolute;
    left: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:25px solid transparent;
    border-left:30px solid #f4d046;
    border-bottom:25px solid transparent;
}

<a href="#" class="lngbtn">Get to know us</a>

Answer 1

我并不是说这不能用 CSS 实现，但用 CSS 做到这一点将是一项乏味的工作。 SVG 始终是创建此类复杂形状的推荐工具(即使使用 SVG 也很难创建这种特殊形状)。

SVG 是:

• 可扩展，因此有助于响应式设计，形状可以拉伸(stretch)以匹配内容
• 让我们更好地控制形状
• 易于维护
• 允许我们为元素使用均匀的渐变色或非纯色背景，就像在 this answer 中所做的那样(这是一个带圆 Angular 的正六边形

---

在 SVG 中，它只需要以圆 Angular 六边形的形式创建一个路径，然后将该路径图像放置在容器后面。

下面是关于 path 元素的 d 属性中使用的各种命令的一些解释(但我强烈建议您学习 SVG 命令 - here is a tutor from the MDN ):

• M - 将虚构的笔移动到坐标指定的点。
• L - 从前一个坐标表示的点到当前坐标绘制一条直线。
• Q - 从笔的当前位置到 Q 命令后的第二组坐标指示的点绘制二次曲线。第一组坐标代表控制点。这个控制点决定了曲线的斜率。
• z - 通过从当前笔位置到起点绘制一条直线来闭合形状。

.hex {
  position: relative;
  height: 100px;
  min-width: 100px;
  padding: 12px 24px;
  margin: 4px;
  float: left;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  color: white;
}
.hex svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
path {
  fill: rgb(251, 208, 0);
}
.hex.border path {
  stroke: red;
  stroke-width: 4;
}
span {
  display: block;
  margin-top: 50px;
  padding: 8px;
  transform: translateY(-50%);
}

<div class='hex'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M27,7 
             L72,7  Q76,7 78,11 
             L95,46 Q97,50 95,54 
             L78,91 Q76,95 72,95
             L28,95 Q24,95 22,91
             L5,54  Q3,50 5,46
             L22,11 Q24,7 28,7z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some text</span>
</div>

<div class='hex'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M27,7 
             L72,7  Q76,7 78,11 
             L95,46 Q97,50 95,54 
             L78,91 Q76,95 72,95
             L28,95 Q24,95 22,91
             L5,54  Q3,50 5,46
             L22,11 Q24,7 28,7z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some lengthy text
  without line break.</span>
</div>

<div class='hex border'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M27,7 
             L72,7  Q76,7 78,11 
             L95,46 Q97,50 95,54 
             L78,91 Q76,95 72,95
             L28,95 Q24,95 22,91
             L5,54  Q3,50 5,46
             L22,11 Q24,7 28,7z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some very lengthy text</span>
</div>

<div class='hex border'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M27,7 
             L72,7  Q76,7 78,11 
             L95,46 Q97,50 95,54 
             L78,91 Q76,95 72,95
             L28,95 Q24,95 22,91
             L5,54  Q3,50 5,46
             L22,11 Q24,7 28,7z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some very lengthy text
  <br>with line break.</span>
</div>

---

对于你的情况，因为你需要形状是一个按钮(或链接)，你应该将 path 元素包装在 a (SVG anchor 元素)中就像在下面的代码片段中一样，并使用 text 元素添加文本(如 span)。您还会注意到我稍微修改了形状，使两侧的 Angular 变窄了一些。

.hex {
  position: relative;
  height: 100px;
  min-width: 300px;
  padding: 12px 24px;
  margin: 4px;
  float: left;
}
.hex svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}
path {
  fill: rgb(251, 208, 0);
}
text {
  font-family: Arial;
  font-weight: bold;
}

<div class='hex'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <a xlink:href='#'>
      <path d='M52,7 
             L248,7  Q253,7 258,11 
             L295,46 Q297,50 295,54 
             L258,91 Q253,95 248,95
             L52,95 Q48,95 42,91
             L5,54  Q3,50 5,46
             L42,11 Q48,7 52,7z' vector-effect='non-scaling-stroke' />
      <text fill='white' text-anchor='middle' x='150' y='55'>Get to know us</text>
    </a>
  </svg>
</div>

---

注意事项:

• 形状并非 100% 完美，但我会将微调留给您。答案是帮助您有一个起点。

• 我添加了一个 stroke(边框)只是为了表明它也可以完成。如果不需要，您可以通过从 path 元素的 CSS 中删除 stroke 和 stroke-width 属性来删除它。

  <

• 不要因为 SVG 代码的冗长而退缩，它如此之大只是因为我已经重复了不止一次 - 每个容器一次。这可以减少。