HTML – CSS：响应细长的六边形与文本和渐变背景/边框

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

主要特点应该是：

>添加渐变背景的可能性
>添加渐变边框的可能性
>文字可以是双线或单线
>在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.

解决方法

使用CSS剪辑路径：

The main platform for this project is Safari on an iPad2.

由于您的主平台是Safari和it does support CSS clip-path with shapes,您可以使用该功能创建细长的六边形,如下面的演示.

这种方法产生的输出将支持(a)梯度背景(b)通过放置具有非常相似的剪辑路径但尺寸较小的伪元素来模仿的渐变边界(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);
}
.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,calc(100% - 22px) 100%,22px 100%,0px 50%);
  z-index: -1;
}
.hex.gradient-bg:before {
  background: linear-gradient(to right,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也可以完成同样的操作,如下面的演示.它只需要以六边形的形式创建路径,然后将该路径图像放置在容器后面.

唯一的缺点是,与CSS剪辑路径不同,没有非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);
}
.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,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)' />
      <stop offset='100%' stop-color='rgb(243,54)' />
    </linearGradient>
    <linearGradient id='brdgrad'>
      <stop offset='0%' stop-color='rgb(199,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,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,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,50z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some lengthy text
  without line break.</span>
</div>

(不要因SVG代码的冗长程度而拖延,它只是因为我不止一次地重复它 – 每个容器一次.这可以减少.)

原文地址：https://www.jb51.cc/html/231611.html