Question

我正在尝试使用css创建hexagon而不使用css设置背景图片。

我在下面的代码中尝试了显示完美但在电子邮件中的问题。未在电子邮件中设置背景图片，因此需要remove from background并需要设置其他任何方式。我尝试了许多不同的方式来设置，但没有成功。因为我不是设计师。

我使用下面的代码完成但不需要设置任何其他方式。

<div class="hexagon pic">
    <span class="top"></span>
    <span class="bottom"></span>
</div>

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

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

任何人都有自己的想法。

由于

Answer 1

<div id="hexagon">
    <img src="image.jpg">
</div>

//样式

#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;}


#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;}

#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;}

#hexagon > img { height: inherit; width: inherit; }

这将完成工作。

使用css创建六边形的问题

1 个答案: