CSS 绘制一个可拉伸的六边形元素

Question

我正在尝试在 CSS 中绘制一个六边形形状，但重要的是它必须能够拉伸以适合内容。这是我使用图像上限的地方：

其代码使用图像：

#searchfield_wrapper::before {

    display: inline-block;
    content: url("../images/hexCapWhite_left.png");
    position: relative;
    left: 6px;
    top: 1px;
}

#searchfield_wrapper::after {

    display: inline-block;
    content: url("../images/hexCapWhite_right.png");
    position: relative;
    left: -6px;
    top: 1px
}

但正如您所看到的，它不太有效并且非常hacky。

我希望能够仅使用 div 元素和边框来做到这一点。这个网站很棒，但形状不可拉伸：https ://css-tricks.com/examples/ShapesOfCSS/

希望您能帮忙！

:-)

Answer 1

几个伪元素似乎工作得很好。

span {
  display: inline-block;
  position: relative;
  line-height: 1.2em;
  padding: 0 .5em;
  background: orange;
  margin: 2em;
  /* just spacing */
  position: relative;
}
span:before,
span:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: .6em solid transparent; /* half line-height */
}
span:before {
  right: 100%;
  border-right-color: orange;
}
span:after {
  left: 100%;
  border-left-color: orange;
}

<span>Short Text</span>
<span>Longer Text</span>
<span>Lorem ipsum dolor sit amet.</span>

它甚至自动对字体大小做出反应 - JSFiddle

更新：修改版本（相同的基本技术 - 2 个伪元素），但现在使用旋转框以便添加边框。

有边框的 JSFiddle 演示