Geek Answers Handbook

How can I create a hexagon shape with an image inside?

I am trying to create a hexagon shape with an image inside

I don't want to put the background inside css, I want to do this with html

How can i do this?

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;
}
+4
source share
2 answers

You need to increase the border thickness ----> border-left: 103px solid transparent;and border-right: 100px solid transparent;and make some positioning settings. You can use the clip  property to display a specific area of ​​the image . For this you need to useposition: absolute;

How does it work clip?

Creates a rectangular area that shows part of an element.

Values:

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

  • - .
  • - .
  • - ( ).
  • - ( ).

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;
}
+1

- clip-path. , .

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% );
}
+1

More articles:


All Articles