带圆角的CSS六角形按钮

时间：2017-01-29 12:07:38

标签： css css3 button css-shapes

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

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>

4 个答案:

答案 0 :(得分：8)

我并不是说使用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锚元素）中，如下面的代码段所示，使用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（边框）只是为了表明它也可以完成。如果不需要，您可以通过从stroke元素的CSS中删除stroke-width和path属性来删除它。

  • 不要因SVG代码的冗长程度而拖延，它只是因为我不止一次地重复它 - 每个容器一次。这可以减少。

答案 1 :(得分：6)

试试这个。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<a href="#" class="lngbtn">Get to know us</a>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：2)

以下是我们用css实现的方法

＆＃13;
＆＃13; 
.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;
	}
＆＃13; 
<a href="#" class="button violet">get to know us!</a>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

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

做了一个例子

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

相关问题
最新问题