CSS：响应细长六角形与文本和渐变背景/边框 [英] CSS: Responsive elongated hexagon with text and gradient background/border

查看：283
本文介绍了CSS：响应细长六角形与文本和渐变背景/边框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想要在中创建两个细长的六边形：





主要功能应该是：




  • 添加渐变背景的可能性

  • 可以添加渐变边框

  • 文字可以是双行或单行的

  • 在Bootstrap网格） - 角的角度应该始终相同。



根据使用一个元素的细长六边形按钮到目前为止最好的解决方案是
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; 
 / *以防止边界线出现在形状的中间* / 
} 
 .hexagon.border：after {
 border-top：none; 
 / *，以防止边框线出现在形状的中间* / 
} 
 / *六边形悬停样式* / 
 .hexagon.border：hover：before ，.hexagon.border：hover：after {
 background：＃fd0; 
} 
 .hexagon.border：hover {
 color：#fff; 
}

此解决方案的主要问题是无法创建渐变背景。所以这在我的情况下不工作。



有没有可能做到这一点？



使用CSS剪辑路径：


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


由于您的主要平台是Safari和它支持CSS clip-路径与形状，您可以利用该功能来创建拉长的六边形，如下面的演示。



通过这种方法将支持（a）渐变背景（b）渐变边界，通过放置具有非常相似的剪辑路径 ）两行文本（d）也保持角的角度，因为点在固定的px距离。



  .hex {position：relative; float：left; height：100px; min-width：100px; padding：12px; margin：4px; font-weight：bold; text-align：center;背景：线性梯度（右，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％ ; zg-index：-1;}。hex.gradient-bg：before {background：linear-gradient（to right，rgb（199，41，41），rgb（243，67，54））; -border：before {background：rgb（245，246，248）;} span {display：block; margin-top：50px; padding：8px; transform：translateY（-50％）;}  

  div class ='hex gradient-border'> < span>一些文本< / span>< / div>< div class ='hex gradient-bg'> < span>一些很长的文本< / span>< / div>< div class ='hex gradient-bg'> < span>一些非常冗长的文字< br /> with line break< / span>< / div>< div class ='hex gradient-bg'> < span>一些很长的文字没有换行符< / span>< / div>





使用SVG：



也喜欢在下面的演示。它只需要以六角形的形式创建路径，然后将路径图像放置在后面



唯一的缺点是与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）;}。高度：100％;宽度：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）;} 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>一些文本< / 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>一些很长的文本< / 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>一些非常冗长的文字< 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>< / span>< / span> b 
 
（不要因为SVG代码有多冗长，它是如此之大，只因为我重复了多次 - 每个容器一次，这可以减少。）
 
I'm trying to create two elongated hexagons in like: 






The main features should be:



    

  • possibility to add a gradient background
    • 

  • possibility to add a gradient border
    • 

  • text could be two-lined or single-lined
    • 

  • responsive in a Bootstrap-grid (nice to have) - angles of corners should be always the same.
    • 




According to Elongated hexagon shaped button using only one element the best solution so far is like
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;
}

The main problem with this solution is that it isn't possible to create a gradient background. So this isn't working in my case.



Is there any possibility to do that?



The main platform for this project is Safari on an iPad2.
 解决方案 
Using CSS Clip Path:

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


Since, your main platform is Safari and it does support CSS clip-path with shapes, you can make use of that feature to create the elongated hexagons like in the below demo.



Output produced by this approach will support (a) gradient backgrounds (b) a gradient border which is mimicked by placing a pseudo-element with a very similar clip-path but smaller dimensions (c) two lines of text (d) also maintain the angles of the corners because the points are at a fixed px distance.







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












Using SVG:



The same can be done using SVG also like in the below demo. It just requires a path to be created in the form of a hexagon and then for that path image to be placed behind the container.



The only drawback is that unlike CSS clip-path there is no non-JS way to get the angles to stay the same.







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









(Don't be put off by how lengthy the SVG code is, it is so big only because I've repeated it more than once - once for each container. That can be reduced.)


                        
这篇关于CSS：响应细长六角形与文本和渐变背景/边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆