Hexagon with css - blurry image

Question

Hexagon with css - blurry image

Navigation

#1 by (6 votes)
#2 by (4 votes)

6

After many attempts I was able to transform an image into a hexagon with CSS only, I had many problems with SVG, js, etc.

However, the image is perfect in IE (albeit unbelievable) and in Chrome it distorts a bit, it distorts Firefox a lot!

Follow the code below:

img {
  max-width: 100%;
  height: auto;
}
.hexagono {
  display: inline-block;
  position: relative;
  width: 90px;
  height: 90px;
  transform: scale(1.25, .707) rotate(-45deg);
  overflow: hidden;
  backface-visibility: hidden;
}
.hexagono > img {
  position: absolute;
  transform: rotate(45deg) scale(.8, 1.404);
  clip: rect(0, 120px, 200px, 2px);
}

<div class="hexagono">
  <img src="http://i.imgur.com/ZNRZUaQ.png"/></div>

Online sample.

Would anyone know an alternative to not blur the image?

css

asked by anonymous 27.05.2015 / 15:23

2 answers

How to compress images in PHP? How to sort the results of a ranking?

score 6 · Answer 1

You can do what you want in the following ways,
using <img> tag as you already have in your question, or using the image as background.
Here's an example using <img> tag:

.hexagono  {
    position:relative;
    margin:auto;
    text-align:center;
    overflow:hidden;
    white-space:nowrap;
    display:table;
}
.hexagono:before {
    content:'';
    padding-top:120%;
    display:inline-block;
    vertical-align:middle;
}

.hexagono:after {
    content:'';
    position:absolute;
    top:0%;
    left:-10%;
    width:120%;
    padding-top:120%;
    transform: rotatex(51deg) rotate(45deg);
    text-align:center;
    box-shadow:0 0 0 200px white;;
}
.hexagono img {
    display:inline-block;
    vertical-align:middle;
    margin:0 -10px;
}

<div class="hexagono">
    <img src="http://i.imgur.com/ZNRZUaQ.png"/></div>

Orifyoupreferthesecondmethod,wecandothisusingtheimageasbackgroundasintheexamplebelow.IwillalsoleaveherealinktoanonlineexampleinjsFiddleinadditiontoseveralexamplesandanotherformofhex: link

.hexagono {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
}
.imagem1{
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.imagem2{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(http://i.imgur.com/ZNRZUaQ.png);
    visibility: visible;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.um {
    width: 200px;
    height: 250px;
    margin: 0 0 0 20px;
}

<div class="hexagono um">
    <div class="imagem1">
        <div class="imagem2"></div>
    </div>
</div>

score 4 · Answer 2

Your CSS does not work well in Chrome and Firefox because the transform property is not yet standard in CSS to work in all browsers we need to add a prefix to the property.

.hexagon {
  position: relative;
  width: 100px; 
  height: 57.74px;
  margin: 28.87px 0;
  background-image: url(http://csshexagon.com/img/meow.jpg);
  background-size: auto 115.4701px;
  background-position: center;
}

.hexTop,
.hexBottom {
  position: absolute;
  z-index: 1;
  width: 70.71px;
  height: 70.71px;
  overflow: hidden;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 14.64px;
}

/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
  content: "";
  position: absolute;
  width: 100.0000px;
  height: 57.73502691896258px;
  -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-28.8675px);
  -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-28.8675px);
  transform:          rotate(45deg) scaleY(1.7321) translateY(-28.8675px);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  background: inherit;
}

.hexTop {
  top: -35.3553px;
}

.hexTop:after {
  background-position: center top;
}

.hexBottom {
  bottom: -35.3553px;
}

.hexBottom:after {
  background-position: center bottom;
}

.hexagon:after {
  content: "";
  position: absolute;
  top: 0.0000px;
  left: 0;
  width: 100.0000px;
  height: 57.7350px;
  z-index: 2;
  background: inherit;
}

<div class="hexagon">
  <div class="hexTop"></div>
  <div class="hexBottom"></div>
</div>

Source: link