我试图用
中的图像创建六边形我不想把背景放在css中,我想用html
来做我该怎么做?
HTML
<div class="hexagon"><img src="http://www.edinphoto.org.uk/0_STREET/0_street_views_-_arden_street_2006_barry_nelson.jpg" width="200" height="200" /></div>
CSS
.hexagon {
position: relative;
width: 150px;
height: 86.60px;
background-color: #64C7CC;
margin: 43.30px 0;
float:left;
margin-right:10px;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 43.30px solid #64C7CC;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 43.30px solid #64C7CC;
}
答案 0 :(得分:1)
你需要增加边框厚度----&gt; border-left: 103px solid transparent;
和border-right: 100px solid transparent;
并进行一些定位调整。要显示图片的特定区域,您可以使用clip
属性。为此,您必须使用position: absolute;
clip
如何运作?它创建一个矩形区域,显示元素的一部分。
clip: rect(top offset, visible width, visible height, left offset)
.hexagon {
position: relative;
top: 50px;
width: 150px;
height: 86.60px;
margin: 43.30px 0;
float:left;
margin-right:10px;
}
img {
position: absolute;
clip: rect(43px,200px,157px,0px);
}
.hexagon:before, .hexagon:after {
content:"";
position: absolute;
border-left: 101px solid transparent;
border-right: 100px solid transparent;
}
.hexagon:before {
top: 0px;
border-bottom: 43.30px solid #64C7CC;
}
.hexagon:after {
top: 100%;
top: 157px;
border-top: 43.30px solid #64C7CC;
}
#hexagons-1 {
display: table;
margin: 0 auto;
margin-top: 100px;
}
#hexagons-2 {
display: table;
margin: 0 auto;
margin-top:-28px;
}
答案 1 :(得分:1)
另一种方法是使用clip-path
。它可以让你覆盖整个六边形,而不仅仅是中间的正方形。
HTML:
<div class="hexagon"><img src="http://www.edinphoto.org.uk/0_STREET/0_street_views_-_arden_street_2006_barry_nelson.jpg" width="200" height="200" /></div>
的CSS:
.hexagon{
width: 190px;
-webkit-clip-path: polygon( 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25% );
clip-path: polygon( 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25% );
}