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
}

但正如你所看到的那样，它并不是很有效，而且非常黑客。

我希望能够使用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;将它们放在父版下。

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

注意：这只会延伸宽度（我猜你的意思）。

＆＃13;

＆＃13;

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;
}

＆＃13;

<div>Text here</div>

＆＃13;

＆＃13;

＆＃13;

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中创建形状的所有技术都存在问题。主要问题是拉伸内容但保持三角帽的末端尺寸一致。另一个问题是绘制带边框的形状。我最终尝试取得一些成功的技术是哈利在这里延长的六角形链接：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有一个名为＆＃39; scale-9＆＃39;它允许您设置9个单元格网格图像，并选择缩放的区域和保持不变的区域。我们需要像CSS一样强大的东西。

无论如何，谢谢你的聆听。