Question

我想用纯CSS3创建一个六边形，如下所示。

如您在图像中看到的，背景上有一个b-g图像。我试图创建六边形，但是六边形内的文本无法正确显示（category1，category3等）。它不透明。我的经理要求以某种方式无法获得实际图像。当我运行此代码时，正在获得具有填充颜色的六边形。

 

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"        
            lang="en">
   <head>
	   <title>hexagon-tiles</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
           <style>        li.hex-row {
     margin-top: -10vw;
}
li.hex-row:nth-child(2n) .hexagon {
  transform: translateX(50%) rotate(120deg);
}
 ul#hexagonContainer {
  margin: 0;
  list-style: none;
  padding: 0;
  margin-top: 10vw;
  }
 .hexagon {
  width: 18vw;
  background: transparent;
  height: 9vw;
  display: inline-block;
  transform: rotate(120deg);
  overflow: hidden;
  visibility: hidden;
  margin-bottom: 7vw;
  position: relative;
  }
 li.hex-row {
  white-space: nowrap;
  //filter: drop-shadow(0.5vw 2vw 0.5vw black);
  }
  .hexagon .hex-inner {
  width: 100%;
  height: 100%;
  background: rebeccapurple;
  transform: rotate(-60deg);
  overflow: hidden;
   position: relative;
  }
  .hexagon .hex-img {
   width: 100%;
   height: 100%;
   transform: rotate(-60deg);
   visibility: visible;
   box-shadow: 1px 0px 0px 0px;
   background-color: #6B8E23;
  }
   .hexagon .hex-img:after {
   position: absolute;
   width: 100%;
   content: '';
   z-index: 1;
   height: 100%;
  //background-image: 
     url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg);
   background-position: center center;
   background-repeat: no-repeat;
   }
  .hex-img.hide {
  visibility: hidden; 
}

.text{
      position: absolute;
    //z-index: 1000;
    width: 100%;
    text-align: center;
}
</style>
</head>
<body>
<div id="container">
<br/>
  <ul id="hexagonContainer">
    <!-- First row. -->
    <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">

          </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">
         </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">
         </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">
         </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">
 			<div class="text">
    <p>My Overall<br/> Score</p>
    </div>
         </div>
        </div>
      </div>
    </li>
     <!-- Second row. -->
     <li class="hex-row">
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">
         </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">
         </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">
         </div>
        </div>
      </div>
      <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img">
           </div>
        </div>
      </div>
       <div class="hexagon">
        <div class="hex-inner">
          <div class="hex-img hide">
         </div>
        </div>
      </div>
       </li>
         <!-- Seventh row. -->
     </ul>       </div>       </body>       </html>

Answer 1

这是一个可能的解决方案。

尝试使用radial-gradient代替当前设置为六边形的绿色背景。

background: radial-gradient(circle, transparent 0%, #6B8E23 60%);

编辑：这是锚标记的解决方案，我使用了flex，因此标记将使用容器的整个w＆h并将文本居中。

HTML：

<div class="text">
    <a href="mycustomersite1.abc.com">My overall score</a>
</div>

CSS：

.text {
    position: absolute;
    z-index: 10;
    width: 100%;
    text-align: center;
    height: 100%;
}
.text a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

希望这会有所帮助。

使用CSS3或Bootstrap的六边形

1 个答案: