Шестиугольник с рамкой и изображением на фоне

#html #css

Как можно с помощью сss и html создать шестиугольник c картинкой внутри и границами?

    

Ответы

Ответ 1

Самый простой способ - сделать на SVG:



.block {
  width: 300px;
  height: 252px;
  margin: 30px auto;
}

.block svg {
  width: 100%;
  height: 100%;
  stroke-width: 1px;
  stroke: #000;
}

  







Немного погуглив, можно найти вот такой интересный вариант на чистом CSS (правда,
при добавлении border рамка немного кривоватая выходит):



.hexagon {
  position: relative;
  margin: 30px auto;
  width: 110px;
  height: 190px;
  background-image: url('http://backgroundlabs.com/wp-content/uploads/2013/03/dandelion-seeds-pattern.png');
  background-position: center center;
  z-index: 1;
  border: #000 solid 1px;
}

.hexagon .face1,
.hexagon .face2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: inherit;
  z-index: -1;
  border-top: #000 solid 1px;
  border-bottom: #000 solid 1px;
  backface-visibility: hidden;
}

.hexagon .face1:before,
.hexagon .face2:before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  background: inherit;
}

.hexagon .face1 {
  transform: rotate(60deg);
}

.hexagon .face1:before {
  right: 0;
  transform: rotate(-60deg) translate(40px, 40px);
}

.hexagon .face2 {
  transform: rotate(-60deg);
}

.hexagon .face2:before {
  left: 0;
  transform: rotate(60deg) translate(-40px, 40px);
}

  

  




Ответ 2

Вариант с clip-path



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.hexagon {
  position: relative;
  margin: 10px auto;
  width: 200px;
  height: 200px;
  background: #000;
}

.hexagon:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: #ccc url(http://webneel.com/daily/sites/default/files/images/daily/09-2014/6-nature-photography-pedraterrinha.jpg)
no-repeat center center;
  background-size: cover;
}

.hexagon,
.hexagon:before {
  -webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
  -webkit-transition: .3s;
  transition: .3s;
}

.hexagon:hover,
.hexagon:hover:before {
  -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}