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

时间:2016-11-02 09:13:44

标签: html css html5 css3 css-shapes

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

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

3 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:1)

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

<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

答案 2 :(得分:0)

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

正在运行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;    
}