如何将类hexagon
图像放入六边形内..我想在标记图像background-image
上更改<img>
..
答案 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;
}
答案 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;
}