带圆角的CSS六角形按钮 [英] CSS hexagonal button with rounded corners

问题描述

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

I'm able to create the same button with CSS. The rounded corners are the important part corners are the main reason. Triangle button with rounded corners, please see my below code and image

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

推荐答案

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

I am not saying that this cannot be achieved with CSS but doing this with CSS would be a tedious job. SVG is always the recommended tool for creating complex shapes like this (and this particular shape is tough to create even using SVG).

SVG是：

• 可扩展，因此它们有助于响应式设计，形状可以拉伸以匹配内容


• 允许我们更好地控制形状


• 易于维护


• 允许我们为元素使用均匀的渐变或非单色背景，例如在这个答案（这是一个带有圆角的正六边形

• scalable and so they help in responsive design, the shape can stretch to match the content
• allows us more control over the shape
• are easy to maintain
• allow us to use even gradient or non-solid color backgrounds for the element like done in this answer (which was for a regular hexagon with rounded corners

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

In SVG, it just requires a path to be created in the form of a rounded hexagon and then for that path image to be placed behind the container.

下面是有关中使用的各种命令的一些说明path 元素的 d 属性（但我强烈建议您学习SVG命令-这是来自MDN的导师）：

Below is some explanation about the various commands used in the path element's d attribute (but I'd strongly advise you to learn SVG commands - here is a tutor from the MDN):

• M -将虚笔移动到坐标指定的点。


• L -从上一个坐标表示的点到当前坐标画一条直线。


• Q -从笔的当前位置到由 Q 命令后的第二组坐标表示的点绘制二次曲线。第一组坐标表示控制点。该控制点确定曲线的斜率。


• z -通过绘制从当前笔位置到起点的直线来封闭形状。

• M - moves the imaginary pen to the point specified by the coordinates.
• L - draws a straight line from the point represented by the previous coordinate to current one.
• Q - Draws a quadratic curve from the current position of the pen to the point that is indicated by the second set of coordinates that follow the Q command. The first set of coordinates represent the control point. This control point determines the slope of the curve.
• z - Closes the shape by drawing a straight line from the current pen position to the starting point.

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

p>

---

对于您的情况，由于需要将形状用作按钮（或链接），因此应将<$ c像下面的代码片段一样，在 a （SVG锚元素）内的$ c> path 元素，并使用文本元素以添加文本（例如 span ）。您还会注意到，我已经稍微修改了形状以使侧面的角度稍微变窄。

For your case, since you need the shape to be a button (or a link), you should wrap the path element inside a a (SVG anchor element) like in the below snippet and use the text element to add text (like a span). You'd also notice that I have modified the shape slightly to make the angles on the sides little narrower.

.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％完美，而是我会把微调留给你。答案是帮助您入门。

• The shape is not 100% perfect but I'd leave the fine tuning to you. The answer is to help you with a starting point.

我添加了笔画（边框）只是为了表明它也是可以做到的。如果不需要，您可以通过从CSS中删除<$ c $ stroke 和 stroke-width 属性从<$ c $删除它c> path 元素。

I've added a stroke (border) just to show that it also can be done. If not needed you can remove it by removing the stroke and stroke-width properties from the CSS for path element.

不要因为SVG代码太长而感到厌烦，它之所以如此之大，仅仅是因为我已经重复了不止一次-每个容器一次。可以减少。

Don't be put off by how lengthy the SVG code is, it is so big only because I've repeated it more than once - once for each container. That can be reduced.

这篇关于带圆角的CSS六角形按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！