Форма шестиугольника с использованием CSS3 или Bootstrap - PullRequest
Новая
       1

Форма шестиугольника с использованием CSS3 или Bootstrap

0 голосов
/ 20 февраля 2019

Я хочу создать шестиугольник с чистым CSS3, как показано ниже.CSSHEXAGON

Как вы видите на изображении, на фоне есть изображение bg.Я пытался создать шестиугольник, но текст внутри шестиугольника отображается неправильно (категория 1, категория 3 и т. д.).это не прозрачно.как-то не получается получить реальное изображение, спрашивает мой менеджер.когда я запускаю этот код, я получаю шестиугольник с заполненным цветом. 

 <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    <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>

1 Ответ

0 голосов
/ 20 февраля 2019

Вот возможное решение.

Вместо текущего зеленого фона, который вы устанавливаете для шестиугольника, попробуйте radial-gradient. 

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

Редактировать: Это решениек тегу привязки я использовал flex, поэтому тег будет использовать всю ширину контейнера и центрировать текст.

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

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...