带圆角的 CSS 六角按钮

Question

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

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

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

---

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

下面是关于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 锚元素）中，如下面的 sn-p 所示，并使用text 元素添加文本（如span）。您还会注意到，我稍微修改了形状，使两侧的角度更窄。

.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 代码的冗长吓到，它之所以如此之大只是因为我重复了不止一次 - 每个容器一次。这可以减少。

Answer 2

试试这个。

.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:"";
       transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg); 
    background-color: #f4d046;
    width:38px;
    height:39px;
    top: 5.3px;
    right: 85%;
    position:absolute;
    border-radius:6px;
    z-index:-1;
   }

.lngbtn:after {
       content:"";
       transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg); 
    background-color: #f4d046;
    width:38px;
    height:39px;
    top: 5.3px;
    left: 85%;
    position:absolute;
    border-radius:6px;
    z-index:-1;
}

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

Answer 3

这是我们如何使用 css 实现的

.button{
		position: relative;
		display:block;
		background: transparent;
		width:200px;
		height:60px;
		line-height:60px;
		text-align:center;
		font-size:15px;
		text-decoration:none;
		text-transform:uppercase;
		margin:40px auto;
	}

	.button:before, .button:after {
		width:200px;
		left: 0px;
		height:27px;
		z-index: -1;
		border-radius:5px;
		background:yellow;
	}

	/* Button Border Style */
	.violet:before,.violet:after {
		border: 3px solid yellow;
	}
	
	.button:before{
		position: absolute;
		content: '';
		border-bottom: none;
		-webkit-transform: perspective(15px) rotateX(5deg);
		-moz-transform: perspective(15px) rotateX(5deg);
		transform: perspective(15px) rotateX(5deg);  
	}

	.button:after{
		position: absolute;
		top: 32px;
		content: '';
		border-top: none;
		-webkit-transform: perspective(15px) rotateX(-5deg);
		-moz-transform: perspective(15px) rotateX(-5deg);
		transform: perspective(15px) rotateX(-5deg);
	}

	/* Just for presentation */
	body{
		position: absolute;
		height: 100%;
		width: 100%;
		background: #fff;
	}

<a href="#" class="button violet">get to know us!</a>

Answer 4

由于三角形和按钮主体颜色相同，您可以将before 和after 做成正方形，然后用transform: rotate(45deg) 将它们旋转45 度，使其看起来像三角形。然后，您可以使用border-radius 使边缘变圆。需要一些定位和尺寸才能使它们看起来正确。我在https://jsfiddle.net/93zbLqLy/做了一个例子

这种方法的缺点是只能有 45 度的三角形边。