4

I'm trying to create a hexagon shape with an image inside

i dont want to put the background inside the css, i want to do it using html

how can i do that?

http://jsfiddle.net/093hv8d1/

HTML

<div class="hexagon"><img src="http://www.edinphoto.org.uk/0_STREET/0_street_views_-_arden_street_2006_barry_nelson.jpg" width="200" height="200" /></div>

CSS

.hexagon {
  position: relative;
  width: 150px; 
  height: 86.60px;
  background-color: #64C7CC;
  margin: 43.30px 0;
  float:left;
  margin-right:10px;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 43.30px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 43.30px solid #64C7CC;
}
José António
  • 101
  • 2
  • 8
  • Will you be using a solid background color? Also, the fiddle you provided isn't quite satisfactory: if you take a look in the dev tools, you'll notice that the size of `.hexagon` is much smaller (as specified in CSS) than the image. – Bram Vanroy Nov 15 '14 at 18:04
  • for a responsive grid of hexagons using the img tag, you can check http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons-with-img-tag – web-tiki Nov 26 '14 at 16:55

2 Answers2

1

You need to increase the border thickness ----> border-left: 103px solid transparent; and border-right: 100px solid transparent; and do some positioning adjustments. For displaying a specific region of an image, you can use clip property. For this to work you have to use position: absolute;

How clip works?

It creates a rectangular region that reveals part of an element.

Values:

clip: rect(top offset, visible width, visible height, left offset)

  1. The first number indicates the top offset - the top edge of the clipping window.
  2. The last number indicates the left offset - the left edge of the clipping window.
  3. The second number is the width of the clipping window plus the left offset(last number).
  4. The third number is the height of the clipping window plus the top offset(first number).

Demo on dabblet

.hexagon {
    position: relative;
    top: 50px;
    width: 150px;
    height: 86.60px;
    margin: 43.30px 0;
    float:left;
    margin-right:10px;
}
img {
    position: absolute;
    clip: rect(43px,200px,157px,0px);
}
.hexagon:before, .hexagon:after {
    content:"";
    position: absolute;
    border-left: 101px solid transparent;
    border-right: 100px solid transparent;
}
.hexagon:before {
    top: 0px;
    border-bottom: 43.30px solid #64C7CC;
}
.hexagon:after {
    top: 100%;
    top: 157px;
    border-top: 43.30px solid #64C7CC;
}
#hexagons-1 {
    display: table;
    margin: 0 auto;
    margin-top: 100px;
}
#hexagons-2 {
    display: table;
    margin: 0 auto;
    margin-top:-28px;
}
Weafs.py
  • 22,731
  • 9
  • 56
  • 78
1

Another way to do this is with clip-path. it will allow you to cover the whole hexagon, and not just the square in the middle.

JsFiddle

html:

<div class="hexagon"><img src="http://www.edinphoto.org.uk/0_STREET/0_street_views_-_arden_street_2006_barry_nelson.jpg" width="200" height="200" /></div>

css:

.hexagon{
    width: 190px;
    -webkit-clip-path: polygon( 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25% );
    clip-path: polygon( 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25% );
}
jacobcc
  • 316
  • 3
  • 10