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 个伪元素），但现在使用旋转框以便添加 边框。

Bordered JSFiddle Demo

Answer 2

我想在之前给出这个，所以这里是结果。

使用:before 和:after 我们可以创建正方形，然后将它们倾斜并用作末端。用背景颜色给它们加上边框，并使用z-index: -1; 使它们位于父级下方。

非常简单的看待它的方式。

注意：这只会在宽度上拉伸（我猜这就是你的意思）。

div {
  width: 200px;
  height: 30px;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  position: relative;
  margin: 20px;
}
div:before,
div:after {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  background: #fff;
  transform: rotate(45deg);
  z-index: -1;
}
div:before {
  border-left: 3px solid #000;
  border-bottom: 3px solid #000;
  top: 3px;
  left: -13px;
}
div:after {
  border-right: 3px solid #000;
  border-top: 3px solid #000;
  top: 3px;
  right: -13px;
}

<div>Text here</div>

Answer 3

根据您的参考编辑代码，我想出了这个，稍微旋转一下，您应该可以让它工作

CSS：

#hexagon {
    width:500px; /*the width you want, I see you want a search fields so assumed it's fixed */
	height: 55px;
	background: red;
	position: relative;
    padding:0px 50px; /* This padding makes it nice uniform and an indent so your text never falls of */
}
#hexagon:before {
	content: "";
	position: absolute;
	top: -24px; /*Also edited this, as 25px was rendering a 1px line sometimes */
	left: 0;
	width: inherit; /*edited this */
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom: -24px; /*Also edited this, as 25px was rendering a 1px line sometimes */
	left: 0;
	width: inherit; /*edited this */
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}

<br /><br /><div id="hexagon">This text is for testing purposes</div>

Answer 4

您可以使用透视来允许有边框的轮廓。但是请注意，由于我使用的是透视，角度可能会发生变化，但应该保留为“单个元素”。

div {
  position: relative;
  min-height: 50px;
  min-width: 150px;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
  display: inline-block;
  margin: 10px;
  background: tomato;
  z-index: 5;
  text-align: center;
  vertical-align:top;
}
div:before,
div:after {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  left: -2px;
  height: calc(50% - 2px);
  width: calc(100% - 4px);
  border: 5px solid black;
}
div:before {
  transform: perspective(50px) rotateX(10deg);
  transform-origin: top center;
  top: -5px;
  border-bottom: none;
}
div:after {
  transform: perspective(50px) rotateX(-10deg);
  transform-origin: bottom center;
  bottom: -5px;
  border-top: none;
}

<div>TEXT</div>
<div>SOME EVEN LONGER TEXT.<br/> WRAPPING TEXT</div>

Answer 5

伙计们，我将就此回答我自己的问题，但这纯粹是因为我整天都在研究上面每个人的答案（我非常感谢并感谢你们），我得出了一些结论，我'想分享：

在 CSS 中用于创建形状的所有技术都存在问题。主要问题是拉伸内容，但最后保持三角形帽的大小一致。另一个问题是绘制带边框的形状。我最终成功尝试的技术是 Harry 的拉长六边形链接：http://codepen.io/hari_shanx/pen/tsLza

这在一段时间内效果很好（尽管它在拉伸时也会扭曲形状）。然后我开始注意到不同浏览器之间的裂缝。众所周知，变换会导致各种问题，我注意到产生这种效果的变换对深度排序和定位产生了巨大影响（我什至无法开始解释它有多混乱）。

因此，我为此研究了一种完全不同的方法，最终使用了border-image：

.hex_border_40 {

    border: 20px solid transparent;
    -webkit-border-image: url(../images/searchfield_bg.png) 20 stretch;
    -o-border-image: url(../images/searchfield_bg.png) 20 stretch;
    border-image: url(../images/searchfield_bg.png) 20 stretch;
}

边框图像如下所示：

结果如下：

样式发生了变化（对我有利），这就是为什么它现在是深灰色背景，我需要将图标更改为白色等。

尽管这种技术的好处是，无论该元素的中心部分缩放多少，端盖都可以并且不会变形。 Flash 有一个叫做“scale-9”的东西，它允许你设置一个 9 单元格的网格图像，并选择哪些区域被缩放，哪些区域保持不变。我们需要像 CSS 一样强大的东西。

无论如何，谢谢收听。