带圆角的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是:

• 可扩展,因此它们有助于响应式设计,形状可以拉伸以匹配内容
• 让我们更多地控制形状
• 很容易维护
• 允许我们使用偶数渐变或非纯色背景作为元素,就像在这个答案中所做的那样(对于带有圆角的正六边形)

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

下面是关于path元素d属性中使用的各种命令的一些解释(但我强烈建议你学习SVG命令 - 这里是来自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锚元素)中,如下面的代码段所示,并使用该text元素添加文本(如a 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(边框)只是为了表明它也可以完成.如果不需要,可以通过从CSS for element中删除stroke和stroke-width属性来删除它path.

• 不要被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>