Hexagon with css - blurred image

Asked

Viewed 1,911 times

6

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

However, the image is perfect in IE (incredible as it sounds) and Chrome it distorts a little, Firefox distorts a lot!

Follows 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?

css

  • The attributes of your CSS commented here is causing the loss of image quality, mainly the scale in the image. But as you can see without them the example has become an octagon instead of a hexagon, hehe.

  • Thanks, Fernando! I’m doing some tests... No success yet! Rs. Hugs!

2 answers

6

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 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 background as in the example below. I will also leave here a link to an online example in jsFiddle additionally with several examples and another form of Hexagono: http://jsfiddle.net/qy26d3e/

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

4

Your CSS does not work well in Chrome and Firefox because the property transform 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: http://csshexagon.com/

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.