具有边框和圆角的CSS3六边形按钮

Question

我有一张图片，它的形状非常奇怪：扁平的六边形有边框和圆角。我想用 CSS 来制作它。
我试图用 CSS 制作它，以便它可以根据长度不断扩展，但对我来说无效。

这是图片：

- Sam IR

---

你做这个的目的是什么？在旧版浏览器中不会被支持。 - Jazi

坦白地说，我会使用SVG背景图像。 - Paulie_D

这是一个类似六边形图片问题的重复。 - Max Payne

Answer 1

CSS :

您可以使用2个3D变换的伪元素来实现此形状：

div {
  display: inline-block;
  position: relative;
  padding: 20px 50px;
  perspective: 30px;
}
div:after,div:before {
  content: '';
  position: absolute;
  top: 0;
  width: 100%; height: 100%;
  z-index: -1;
  background: orange;
  border: 2px solid darkorange;
  box-sizing: border-box;
}
div:before {
  right: 50%;
  transform-origin: 100% 0;
  transform: rotateY(-10deg);
  border-radius: 10px 0 0 10px;
  border-width: 3px 0 3px 5px;
}
div:after {
  left: 50%;
  transform-origin: 0 0;
  transform: rotateY(10deg);
  border-radius: 0 10px 10px 0;
  border-width: 3px 5px 3px 0;
}
body{text-align:center;}

<div>some text</div><br/><br/>
<div>some longer text</div>

请注意，您需要添加适当的厂商前缀以最大限度地支持浏览器。请参阅canIuse获取更多信息。

---

SVG :

另一种选择是使用带有多边形元素的内联SVG：

div{
    display:inline-block;
    position:relative;
    padding:20px 50px;
}
svg{
    position:absolute;
    top:0; left:0;
    z-index:-1;
    min-width:100%; min-height:100%;
}

<div class="btn">
    some text
    <svg viewbox="0 0 100 30">
        <polygon points="2 8 50 2 98 8 98 22 50 28 2 22" stroke-linejoin="round" stroke-width="2" stroke="darkorange" fill="orange" />
    </svg>
</div>
<div class="btn">
    some longer text
    <svg viewbox="0 0 100 30">
        <polygon points="2 8 50 2 98 8 98 22 50 28 2 22" stroke-linejoin="round" stroke-width="2" stroke="darkorange" fill="orange" />
    </svg>
</div>

- web-tiki

---

你好，感谢你的快速回答。Safari浏览器会发生什么情况呢？ 正如你所知，Safari不支持“CSS3 Transform”。 - Sam IR

我刚刚创建了一个演示 HTML 页面，添加了供应商前缀代码，但仍无法帮助我制作这些按钮。请在 Safari 中检查此 fiddle。 https://jsfiddle.net/vnonx5yj/ - Sam IR

是的，我正在我的Windows电脑上检查，Safari版本是5.1.7。 - Sam IR

@SamIR 请注意，Windows 上的 Safari 浏览器已经过时（最新版本为8）。此外，在您上次分享的 fiddle 中，您没有为 perspective 声明添加 -webkit- 前缀。我在这里添加了 https://jsfiddle.net/webtiki/vnonx5yj/1/ - web-tiki

让我们在聊天中继续这个讨论。 - Sam IR

Answer 2

我从这里复制了样式，并进行了轻微的更改，以大致匹配您的按钮外观：

#hexagon {
width: 200px;
height: 30px;
background: orange;
position: relative;}

#hexagon:before {
content: "";
position: absolute;
top: -15px;
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 15px solid orange;}

#hexagon:after {
content: "";
position: absolute;
bottom: -15px;
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 15px solid orange;}

六边形是形状的中间部分

六边形:after是形状的底部部分

六边形:before是形状的顶部部分

#hexagon中指定的宽度需要与:before和:after的border-left + border-right匹配，即(200px = 100px+100px)

#hexagon中指定的高度需要与:before和:after的border-top + border-bottom匹配，即(30px = 15px + 15px)

HTML只需为

<div id="hexagon">

到目前为止，我还没有看到如何使用您正在使用的边框效果，但如果有人可以扩展此内容，我认为这是可能的。

- Harrison Smith

---

你提供的解决方案对我不起作用，因为我需要一个可以根据文本动态改变宽度的按钮。很抱歉，你所建议的是静态宽度。 - Sam IR