Question

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

主要功能应该是：

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

Answer 1

使用CSS剪辑路径：

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

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

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

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

使用SVG：

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

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

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

（不要被SVG代码的冗长程度所拖延，它只是因为我不止一次地重复它 - 每个容器一次。这可以减少。 ）

Answer 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>

CSS：响应式细长六边形，带有文字和渐变背景/边框

2 个答案: