Html 在我的示例中，图像位于六边形内

如何将hexagon放入类

hexagon

图像中。。我想更改标签图像上的背景图像

---

我的例子：

我甚至提出了这样的问题。下面是我的解决方案

运行

HTML

---

我甚至提出过这样的问题。下面是我的解决方案

运行

HTML

.hexagon span{
位置：绝对位置；
显示：块；
左边框：100px实心红色；
右边框：100px实心红色；
宽度：200px；
}
.顶{
排名：0；
边框底部：173px实心透明；
}
.底部{
底部：0；
边框顶部：173px实心透明；
}
.六边形{
背景：url(http://placekitten.com/400/400/);
宽度：400px；
高度：346px；
位置：相对位置；
}

.hexagon span{
位置：绝对位置；
显示：块；
左边框：100px实心红色；
右边框：100px实心红色；
宽度：200px；
}
.顶{
排名：0；
边框底部：173px实心透明；
}
.底部{
底部：0；
边框顶部：173px实心透明；
}
.六边形{
背景：url(http://placekitten.com/400/400/);
宽度：400px；
高度：346px；
位置：相对位置；
}

---

根据您要求的尺寸，我更新了答案：

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

.hexaHolder{
高度：115px；
宽度：99px；
浮动：左；
}
.hexa img{
宽度：130%；
页边顶部：-5px；
左边距：-50px
}
.hexa、.hexa div{
保证金：0自动；
变换原点：50%50%；
溢出：隐藏；
}
hexa先生{
文本对齐：居中；
保证金：0；
宽度：270px；
高度：315px；
}
.hexa div{
宽度：100%；
身高：100%；
}
hexa先生{
变换：旋转（120度）；
}
.hex1{
变换：旋转（-60度）；
}
.hex2{
变换：旋转（-60度）；
}
.六角行{
清除：左；
}
.hexaHolder.偶数{
利润上限：57.5px；
}
#包裹{
最小宽度：600px；
}

---

根据您要求的尺寸，我更新了答案：

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

.hexaHolder{
高度：115px；
宽度：99px；
浮动：左；
}
.hexa img{
宽度：130%；
页边顶部：-5px；
左边距：-50px
}
.hexa、.hexa div{
保证金：0自动；
变换原点：50%50%；
溢出：隐藏；
}
hexa先生{
文本对齐：居中；
保证金：0；
宽度：270px；
高度：315px；
}
.hexa div{
宽度：100%；
身高：100%；
}
hexa先生{
变换：旋转（120度）；
}
.hex1{
变换：旋转（-60度）；
}
.hex2{
变换：旋转（-60度）；
}
.六角行{
清除：左；
}
.hexaHolder.偶数{
利润上限：57.5px；
}
#包裹{
最小宽度：600px；
}

---

我想在没有样式的情况下完成这项工作

背景图像

检查一下这个OMG。。我说：我想在没有样式的情况下做这个

背景图像

检查一下这个OMG。。我说：在我不知道它是如何工作的情况下，使用比例缩放计算器。。例如，我想将六边形调整为宽度：270px高度：310px。。你能在你的例子中演示吗？在我不知道它是如何工作的情况下使用比率缩放计算器。。例如，我想将六边形调整为宽度：270px高度：310px。。您能在示例中演示吗？这在六边形内使用了

标记。这在六边形内使用了

标记。@TriSTaR Hi！如果你有解决办法。接受正确的答案以帮助社区。@TriSTaR Hi！如果你有解决办法。接受正确的答案，帮助社区。

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