如何创建内部带有图像的六边形？ [复制]

Question

我正在尝试创建一个内部带有图像的六边形

我不想把背景放在css里面，我想用html来做

我该怎么做？

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

Answer 1

需要增加边框粗细---->border-left: 103px solid transparent;和border-right: 100px solid transparent;并做一些定位调整。要显示图像的特定区域，您可以使用clip 财产。为此，您必须使用position: absolute;

clip 是如何工作的？

它创建一个矩形区域，显示元素的一部分。

值：

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

1. 第一个数字表示顶部偏移 - 剪辑窗口的顶部边缘。
2. 最后一个数字表示左偏移 - 剪辑窗口的左边缘。
3. 第二个数字是剪辑窗口的宽度加上左偏移量（最后一个数字）。
4. 第三个数字是剪辑窗口的高度加上顶部偏移量（第一个数字）。

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

Answer 2

另一种方法是使用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% );
}