Hexagon with css – blurry image

Question:

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

However, the image is perfect in IE (oddly enough) and in Chrome it distorts a little, in Firefox it distorts a lot!

Follow code:

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 example.

Would anyone know an alternative to not blur the image?

Answer:

You can do what you want in the following ways,
using the <img> tag as you already have in your question, or using the image as a background.
Here's an example using the <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>

Or if you prefer the second method, we can do this using the image as a background as in the example below. I'll also leave here a link to an online example in jsFiddle additionally with several examples and another hexagon shape: http://jsfiddle.net/qqy26d3e/

.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>
Post Views: 0
Scroll to Top