CSS：带有文本和渐变背景/边框的响应式细长六边形答案

【问题标题】：CSS: Responsive elongated hexagon with text and gradient background/borderCSS：带有文本和渐变背景/边框的响应式细长六边形
【发布时间】：2016-07-25 04:01:20
【问题描述】：

我正在尝试创建两个细长的六边形：

主要特点应该是：

可以添加渐变背景
可以添加渐变边框
文本可以是两行或单行
在 Bootstrap 网格中响应（很高兴） - 角的角度应该始终相同。

根据Elongated hexagon shaped button using only one element 到目前为止最好的解决方案是 https://jsfiddle.net/veuc78af/:

/*hexagons*/
 .hexagon {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    min-width: 200px;
    height: 80px;
    margin: 40px auto;
    color: #fd0;
    text-align: center;
    text-decoration: none;
    line-height: 80px;
}
.hexagon:before, .hexagon:after {
    position: absolute;
    content:'';
    width: 100%;
    left: 0px;
    height: 34px;
    z-index: -1;
}
.hexagon:before {
    transform: perspective(15px) rotateX(3deg);
}
.hexagon:after {
    top: 40px;
    transform: perspective(15px) rotateX(-3deg);
}
/* hexagon Border Style */
 .hexagon.border:before, .hexagon.border:after {
    border: 4px solid #fd0;
}
.hexagon.border:before {
    border-bottom: none;
    /* to prevent the border-line showing up in the middle of the shape */
}
.hexagon.border:after {
    border-top: none;
    /* to prevent the border-line showing up in the middle of the shape */
}
/* hexagon hover styles */
 .hexagon.border:hover:before, .hexagon.border:hover:after {
    background: #fd0;
}
.hexagon.border:hover {
    color: #fff;
}

此解决方案的主要问题是无法创建渐变背景。所以这对我来说不起作用。

有没有可能这样做？

本项目的主要平台是 iPad2 上的 Safari。

【问题讨论】：

适合您的情况的最佳解决方案是使用 SVG。我们可以看看 CSS clip-path 但浏览器支持很差（IE 根本不支持，FF 需要提供 SVG 作为路径）。
您也可以使用 JS/JQuery 执行此操作，使用字符串中的字符数，计算/设置六边形的宽度。其他功能可以在 CSS3 中实现。但是这个解决方案意味着你可以为每个六边形设置一个唯一的 id，来设置宽度......
我认为 SVG 也是最好的解决方案。我忘了说我项目的主要设备是 Apple iPad。我会更新它并添加标签“svg”

标签： html css svg css-shapes

【解决方案1】：

使用 CSS 剪辑路径：

本项目的主要平台是 iPad2 上的 Safari。

由于您的主要平台是 Safari 和 it does support CSS clip-path with shapes，您可以利用该功能创建拉长的六边形，如下面的演示所示。

这种方法产生的输出将支持 (a) 渐变背景 (b) 通过放置具有非常相似 clip-path 但尺寸更小的伪元素来模仿渐变边框 (c) 两行文本 (d)还要保持角的角度，因为这些点的距离是固定的 px。

.hex {
  position: relative;
  float: left;
  height: 100px;
  min-width: 100px;
  padding: 12px;
  margin: 4px;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(to right, rgb(199, 41, 41), rgb(243, 67, 54));
  -webkit-clip-path: polygon(25px 0px, calc(100% - 25px) 0px, 100% 50%, calc(100% - 25px) 100%, 25px 100%, 0px 50%);
}
.hex.gradient-bg {
  color: white;
}
.hex.gradient-border {
  color: rgb(199, 41, 41);
}
.hex:before {
  position: absolute;
  content: '';
  height: calc(100% - 14px);  /* 100% - 2 * border width */
  width: calc(100% - 14px);  /* 100% - 2 * border width */
  left: 7px; /* border width */
  top: 7px; /* border width */
  -webkit-clip-path: polygon(22px 0px, calc(100% - 22px) 0px, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0px 50%);
  z-index: -1;
}
.hex.gradient-bg:before {
  background: linear-gradient(to right, rgb(199, 41, 41), rgb(243, 67, 54));
}
.hex.gradient-border:before {
  background: rgb(245, 246, 248);
}
span {
  display: block;
  margin-top: 50px;
  padding: 8px;
  transform: translateY(-50%);
}

<div class='hex gradient-border'>
  <span>Some text</span>
</div>
<div class='hex gradient-bg'>
  <span>Some very lengthy text</span>
</div>
<div class='hex gradient-bg'>
  <span>Some very lengthy text
  <br/>with line break</span>
</div>
<div class='hex gradient-bg'>
  <span>Some very lengthy text
  without line break</span>
</div>

使用 SVG：

同样可以使用 SVG 完成，就像下面的演示一样。它只需要以六边形的形式创建一个path，然后将该path 图像放在容器后面。

唯一的缺点是，与 CSS clip-path 不同，没有非 JS 方法可以让角度保持不变。

.hex {
  position: relative;
  height: 100px;
  min-width: 100px;
  padding: 12px 24px;
  margin: 4px;
  float: left;
  font-weight: bold;
  text-align: center;
}
.hex.gradient-bg {
  color: white;
}
.hex.gradient-border {
  color: rgb(199, 41, 41);
}
.hex svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
path {
  stroke: url(#brdgrad);
  stroke-width: 7; /* border width */
}
.hex.gradient-bg path {
  fill: url(#bggrad);
}
.hex.gradient-border path {
  fill: rgb(245, 246, 248);
}
span {
  display: block;
  margin-top: 50px;
  padding: 8px;
  transform: translateY(-50%);
}

<svg width='0' height='0'>
  <defs>
    <linearGradient id='bggrad'>
      <stop offset='0%' stop-color='rgb(199, 41, 41)' />
      <stop offset='100%' stop-color='rgb(243, 67, 54)' />
    </linearGradient>
    <linearGradient id='brdgrad'>
      <stop offset='0%' stop-color='rgb(199, 41, 41)' />
      <stop offset='100%' stop-color='rgb(243, 67, 54)' />
    </linearGradient>
  </defs>
</svg>
<div class='hex gradient-border'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M25,7 L75,7 93,50 75,93 25,93 7,50z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some text</span>
</div>

<div class='hex gradient-bg'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M25,7 L75,7 93,50 75,93 25,93 7,50z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some very lengthy text</span>
</div>

<div class='hex gradient-bg'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M25,7 L75,7 93,50 75,93 25,93 7,50z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some very lengthy text
  <br>with line break.</span>
</div>

<div class='hex gradient-bg'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M25,7 L75,7 93,50 75,93 25,93 7,50z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some lengthy text
  without line break.</span>
</div>

(不要被 SVG 代码的冗长所拖累，它之所以这么大只是因为我重复了不止一次 - 每个容器一次。这可以减少。 )

【讨论】：

哇，版本 1 太完美了！由于我不熟悉 SVG 和剪辑路径：如何修改边框宽度？在我的示例中，它应该是 7 像素。
@Crack_David：这应该很简单。伪元素的top 和left 应该等于border-width，而它们的height 和width 应该小于100% 乘以border-width 的2 倍。这使得伪类很好地位于容器内，从而使容器的背景看起来像它的边框。
(注意： 根据border-width，您可能还需要对伪clip-path 进行一次性编辑。如果您在演示中看到，剪辑父母的左右是15px，但孩子是13px，以保持始终相同的厚度。不幸的是，这将不得不反复试验，据我所知，没有办法解决这个问题。）
啊，现在我明白了。非常感谢！

【解决方案2】：

.hexagon {
  position: relative;
  width: 180px; 
  height: 103.92px;
  background-color: #ffffff;
  margin: 51.96px 0;
  border-left: solid 5px #808080;
  border-right: solid 5px #808080;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 127.28px;
  height: 127.28px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 21.3604px;
}

.hexagon:before {
  top: -63.6396px;
  border-top: solid 7.0711px #808080;
  border-right: solid 7.0711px #808080;
}

.hexagon:after {
  bottom: -63.6396px;
  border-bottom: solid 7.0711px #808080;
  border-left: solid 7.0711px #808080;
}

.hexText{
     position: absolute;
    top: 59px;
    z-index: 999;
    left: 12%;
    text-align:center;
}


.bgGrey{
    background:#e7e6e6 !important; 
}




 <div class="row">
                <div class="col-md-3 col-xs-12">
                    <div class="hexagon"></div>
                    <p class="hexText">Up to 20% increase<br />in sales with<br />Cross sell & Up sell</p>
                </div>
                <div class="col-md-3 col-xs-12">
                    <div class="hexagon bgGrey"></div>
                    <p class="hexText">Up to 35%reduction<br />in print ,postage ,<br />logistic & back<br />office cost</p>
                </div>
                <div class="col-md-3 col-xs-12">
                    <div class="hexagon"></div>
                    <p class="hexText">Scalable100+million <br />statements<br />processed & <br />distributed monthly </p>
                </div>
                <div class="col-md-3 col-xs-12">
                    <div class="hexagon bgGrey"></div>
                    <p class="hexText">Up to 35%reduction<br />in print ,postage ,<br />logistic & back<br />office cost</p>
                </div>
            </div>

【讨论】：