Как сверстать шестиугольные ячейки с картинками и ховером?

#html #css #вёрстка

Задача сверстать блоки, с изображением и ховером (цвет случайный), блок является ссылкой.



сначала попробовал с css3, подсмотрел http://kizu.ru/fun/polygons/ , но возникла
сложность с закруглением граней фигуры, плюс еще внутренняя граница
позже подумал насчет canvas, но опять же углы плюс не разу с canvas не работал.

после прочтения документации по canvas словил пятничный ступор мозга, подскажите
в каком направлении стоит продолжать?
    

Ответы

Ответ 1

Найдено на англоязычном stackoverflow, добавьте border-radius и будет то, что вам нужно.
https://stackoverflow.com/questions/10062887/generate-repeating-hexagonal-pattern-with-css3
Сразу демо.



body {
  background-color: white;
}
.hexrow {
  white-space: nowrap;
  /*right/left margin set at (( width of child div x sin(30) ) / 2) makes a fairly
tight fit; a 3px bottom seems to match*/
  margin: 0 25px 3px;
}
.hexrow > div:hover > span {
  opacity: 1;
  z-index: 3;
  color: white;
  
}
.hexrow > div:hover {
  background-color: rgb(199, 155, 101);
  background-image: none !important;
  z-index: 2;
}
.hexrow > div:hover > div:first-of-type {
  background-color: rgb(199, 155, 101);
  background-image: none;
  z-index: 2;
}
.hexrow > div:hover > div:last-of-type {
  background-color: rgb(199, 155, 101);
  background-image: none;
  z-index: 2;
}
.hexrow > div {
  border-radius: 10px;
  width: 104px;
  height: 173.2px;
  /* ( width x cos(30) ) x 2 */
  /* For margin:
    right/left = ( width x sin(30) ) makes no overlap 
    right/left = (( width x sin(30) ) / 2) leaves a narrow separation
    */
  margin: 0 25px;
  position: relative;
  background-image: url(http://i1166.photobucket.com/albums/q605/Artem_Lebedev/dog-training-collars.jpg);
  background-position: -50px 0;
  /* -left position -1 x width x sin(30) */
  background-repeat: no-repeat;
  background-size: auto 120%;
  color: #000000;
  text-align: center;
  line-height: 173.2px;
  /*equals height*/
  display: inline-block;
}
.hexrow > div:nth-child(odd) {
  top: 43.3px;
  /* ( width x cos(30) / 2 ) */
}
.hexrow > div:nth-child(even) {
  top: -44.8px;
  /* -1 x( ( width x cos(30) / 2) + (hexrow bottom margin / 2)) */
}
.hexrow > div > div:first-of-type {
  border-radius: 10px;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  background-image: inherit;
  -ms-transform: rotate(60deg);
  /* IE 9 */
  -moz-transform: rotate(60deg);
  /* Firefox */
  -webkit-transform: rotate(60deg);
  /* Safari and Chrome */
  -o-transform: rotate(60deg);
  /* Opera */
  transform: rotate(60deg);
}
.hexrow > div > div:first-of-type:before {
  content: '';
  position: absolute;
  width: 206px;
  /* width of main + margin sizing */
  height: 100%;
  background-image: inherit;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto 120%;
  bottom: 0;
  left: 0;
  z-index: 1;
  -ms-transform: rotate(-60deg) translate(-150px, 0);
  /* IE 9 */
  -moz-transform: rotate(-60deg) translate(-150px, 0);
  /* Firefox */
  -webkit-transform: rotate(-60deg) translate(-150px, 0);
  /* Safari and Chrome */
  -o-transform: rotate(-60deg) translate(-150px, 0);
  /* Opera */
  transform: rotate(-60deg) translate(-150px, 0);
  -ms-transform-origin: 0 0;
  /* IE 9 */
  -webkit-transform-origin: 0 0;
  /* Safari and Chrome */
  -moz-transform-origin: 0 0;
  /* Firefox */
  -o-transform-origin: 0 0;
  /* Opera */
  transform-origin: 0 0;
}
.hexrow > div > div:last-of-type {
  content: '';
  position: absolute;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
  overflow: hidden;
  background-image: inherit;
  -ms-transform: rotate(-60deg);
  /* IE 9 */
  -moz-transform: rotate(-60deg);
  /* Firefox */
  -webkit-transform: rotate(-60deg);
  /* Safari and Chrome */
  -o-transform: rotate(-60deg);
  /* Opera */
  transform: rotate(-60deg);
}
.hexrow > div > div:last-of-type:before {
  content: '';
  position: absolute;
  width: 206px;
  /* starting width + margin sizing */
  height: 100%;
  background-image: inherit;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto 120%;
  bottom: 0;
  left: 0;
  z-index: 1;
  /*translate properties are initial width (100px) and half height (173.2 / 2 = 86.6) */
  -ms-transform: rotate(60deg) translate(100px, 86.6px);
  /* IE 9 */
  -moz-transform: rotate(60deg) translate(100px, 86.6px);
  /* Firefox */
  -webkit-transform: rotate(60deg) translate(100px, 86.6px);
  /* Safari and Chrome */
  -o-transform: rotate(60deg) translate(100px, 86.6px);
  /* Opera */
  transform: rotate(60deg) translate(100px, 86.6px);
  -ms-transform-origin: 100% 0;
  /* IE 9 */
  -webkit-transform-origin: 100% 0;
  /* Safari and Chrome */
  -moz-transform-origin: 100% 0;
  /* Firefox */
  -o-transform-origin: 100% 0;
  /* Opera */
  transform-origin: 100% 0;
}
.hexrow > div > span {
  display: inline-block;
  margin: 0 -30px;
  line-height: 1.1;
  vertical-align: middle;
  white-space: normal;
  opacity: 0;
  position: relative;
}
.hexrow:nth-child(2) > div:nth-child(1) {
  background-image: url(http://i724.photobucket.com/albums/ww244/NBAchikk1995/flowers.jpg);
}
.hexrow:nth-child(2) > div:nth-child(1) > span {
  /*change some other settings*/
  margin: 0 -20px;
  color: black;
  font-size: .8em;
  font-weight: bold;
}
.hexrow:nth-child(2) > div:nth-child(2) {
  background-image: url(http://i197.photobucket.com/albums/aa231/sterling_red/landscape.jpg);
  color: #ffffff;
}
.hexrow:nth-child(2) > div:nth-child(3) {
  background-image: url(http://i257.photobucket.com/albums/hh204/h22prld98/2157781306_7a7a8e4cf7.jpg);
  opacity: .3;
  color: #ffffff;
}
.hexrow:nth-child(2) > div:nth-child(3) > div:before {
  /* nothing special needed here */
}
.hexrow:nth-child(2) > div:nth-child(4) {
  background-image: url(http://i916.photobucket.com/albums/ad8/paulak100/Obraz395.jpg);
  /*you can shift a large background image, but it can get complicated
    best to keep the image as the total width (200px) and height (174px)
    that the hex would be.
    */
  background-position: -150px -20px;
}
.hexrow:nth-child(2) > div:nth-child(4) > div:before {
  background-position: -100px -20px;
  /* the left shift is always less in the pseudo elements by the amount of the base
shift */
}

  

    Any text you would like (that fits).
    

    

  
  

    Really, change the text to say what you want!
    

    

  
  

    I'm not kidding here.
    

    

  
  

    Okay?
    

    

  



  

    Did I mention you can change images? I mean, really, these are just rectangular
images "cropped" to a hex shape (well, more complicated than just a crop, but the result
is the same).
    

    

  
  

    See, another image!
    

    

  
  

    Testing opacity.
    

    

  
  

    Satisfied?
    

    

  



Ответ 2

При помощи svg. Пожалуй, самый прямой способ для этого случая.