CSS 带圆角的六角形按钮
CSS hexagonal button with rounded corners
我可以用 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>
由于三角形和按钮的主体颜色相同，所以可以将before和after变成正方形，然后用transform: rotate(45deg)旋转45度使它们看起来像三角形。然后，您可以使用 border-radius 使边缘变圆。需要一些定位和调整大小才能使它们看起来正确。我在 https://jsfiddle.net/93zbLqLy/
做了一个例子
这种方法的缺点是你只能有 45 度的三角形边。
我并不是说 CSS 无法做到这一点，但使用 CSS 将是一项乏味的工作。 SVG 始终是创建此类复杂形状的推荐工具（即使使用 SVG 也很难创建这种特殊形状）。
SVG 是：
- 可缩放，因此它们有助于响应式设计，形状可以拉伸以匹配内容
- 让我们可以更好地控制形状
- 易于维护
- 允许我们为元素使用均匀的渐变或 non-solid 颜色背景，就像在
中所做的那样（这是用于带圆角的正六边形
在 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>
对于你的情况，因为你需要形状是一个按钮（或 link），你应该将 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（边框）只是为了表明它也可以完成。如果不需要，您可以通过从 path 元素的 CSS 中删除 stroke 和 stroke-width 属性来删除它。
不要被 SVG 代码的冗长拖延，它之所以如此之大，只是因为我已经重复了不止一次 - 每个容器一次。那是可以减少的。
试试这个。
.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>
下面是我们如何使用 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>
我可以用 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>
由于三角形和按钮的主体颜色相同，所以可以将before和after变成正方形，然后用transform: rotate(45deg)旋转45度使它们看起来像三角形。然后，您可以使用 border-radius 使边缘变圆。需要一些定位和调整大小才能使它们看起来正确。我在 https://jsfiddle.net/93zbLqLy/
这种方法的缺点是你只能有 45 度的三角形边。
我并不是说 CSS 无法做到这一点，但使用 CSS 将是一项乏味的工作。 SVG 始终是创建此类复杂形状的推荐工具（即使使用 SVG 也很难创建这种特殊形状）。
SVG 是：
- 可缩放，因此它们有助于响应式设计，形状可以拉伸以匹配内容
- 让我们可以更好地控制形状
- 易于维护
- 允许我们为元素使用均匀的渐变或 non-solid 颜色背景，就像在
在 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>
对于你的情况，因为你需要形状是一个按钮（或 link），你应该将 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（边框）只是为了表明它也可以完成。如果不需要，您可以通过从path元素的 CSS 中删除stroke和stroke-width属性来删除它。不要被 SVG 代码的冗长拖延，它之所以如此之大，只是因为我已经重复了不止一次 - 每个容器一次。那是可以减少的。
试试这个。
.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>
下面是我们如何使用 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>