在我的例子中Hexagon里面的图像

Question

如何将类hexagon图像放入六边形内..我想在标记图像background-image上更改<img> ..

我的例子：http://codepen.io/anon/pen/ZBzYqp

Answer 1

bootRepackage.enabled = false

.hexagon span {
    position: absolute;
    display: block;
    border-left: 100px solid red;
    border-right: 100px solid red;
    width: 200px;
}

.top {
    top: 0;
    border-bottom: 173px solid transparent;
}

.bottom{
    bottom: 0;
    border-top: 173px solid transparent;
}

.hexagon {
    background: url(http://placekitten.com/400/400/);
    width: 400px;
    height: 346px;
    position: relative;
}

Answer 2

我的更新根据您所需的尺寸回答：

<div id="wrap">
<div class="hex-row">
    <a href="http://www.google.ca" class='hexaHolder'>
        <div class="hexa">
            <div class="hex1">
                <div class="hex2">
                    <img src="http://csshexagon.com/img/meow.jpg" alt="" />
                </div>
            </div>
        </div>
    </a>
</div>
</div>

.hexaHolder{
    height: 115px;
    width: 99px;
    float: left;
}
.hexa img{
    width:130%;
    margin-top: -5px;
    margin-left:-50px
}
.hexa, .hexa div {
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
}
.hexa {
    text-align: center;
    margin: 0;
    width: 270px;
    height: 315px;
}
.hexa div {
  width: 100%;
  height: 100%;
}
.hexa {
  transform: rotate(120deg);
}
.hex1 {
  transform: rotate(-60deg);
}
.hex2 {
  transform: rotate(-60deg);
}

.hex-row {
    clear: left;
}

.hexaHolder.even {
    margin-top: 57.5px;
}

#wrap {
    min-width:600px;    
}

Check the Fiddle

Answer 3

我甚至想出了这样的问题。我的解决方案在这里。

正在运行Fiddle

HTML

<div id="wrap">
<div class="hex-row">
    <a href="http://www.google.ca" class='hexaHolder'>
        <div class="hexa">
            <div class="hex1">
                <div class="hex2">
                    <img src="http://csshexagon.com/img/meow.jpg" alt="" />
                </div>
            </div>
        </div>
    </a>
</div>
</div>

CSS

.hexaHolder{
    height: 115px;
    width: 99px;
    float: left;
}
.hexa img{
    width:100%;
    margin-top: -5px;
}
.hexa, .hexa div {
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
}
.hexa {
    text-align: center;
    margin: 0;
    width: 135px;
    height: 115px;
}
.hexa div {
  width: 100%;
  height: 100%;
}
.hexa {
  transform: rotate(120deg);
}
.hex1 {
  transform: rotate(-60deg);
}
.hex2 {
  transform: rotate(-60deg);
}

.hex-row {
    clear: left;
}

.hexaHolder.even {
    margin-top: 57.5px;
}

#wrap {
    min-width:600px;    
}