在CSS/HTML中创建六边形 [英] Creating Hexagons in css / html
本文介绍了在CSS/HTML中创建六边形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在CSS/html中制作几个六角形，类似于以下内容:
Im trying to make a couple of hexagons in css /html to resemble something like this:
http://www.asta-uk.com/sites/all/themes/asta/logo.png
现在我已经制作了一个六角形，并尝试将其复制两次，但是顶部似乎没有显示在第二个六角形上.
now i have made one hexagon, and tried to copy it two other times but the top part doesn't seem to show on the second two.
有什么想法吗?
PS使用IE，原因是它只能在IE环境中使用.
PS use IE, reason being it will only ever be used in an IE environment.
<html>
<HEAD>
<STYLE>
.top
{
height:0;
width:50;
display: block;
border:15px solid red;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:red;
border-left-color:transparent;
}
.middle
{
height: 20px;
background: red;
width: 50px;
display: block;
}
.bottom
{
height:0;
width:50;
display: block;
border:15px solid red;
border-top-color:red;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
<!-- Second Hex-->
.top2
{
height:0;
width:50;
display: block;
border: 15px solid black;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:black;
border-left-color:transparent;
}
.middle2
{
height: 20px;
background: black;
width: 50px;
display: block;
}
.bottom2
{
height:0;
width:50;
display: block;
border:15px solid black;
border-top-color:black;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
<!--hex 3-->
.top3
{
height:0;
width:50;
display: block;
border:15px solid green;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:green;
border-left-color:transparent;
}
.middle3
{
height: 20px;
background: green;
width: 50px;
display: block;
}
.bottom3
{
height:0;
width:50;
display: block;
border:15px solid green;
border-top-color:green;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
</STYLE>
</HEAD>
<BODY>
<div class="hexagon"style="position: absolute; top: 0px; left: 2px;">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<!-- GREEN-->
<div class="hexagon3" style="position: absolute; top: 48px; left: 55px;">
<span class="top3"></span>
<span class="middle3"></span>
<span class="bottom3"></span>
</div>
<!-- black-->
<div class="hexagon2" style="position: absolute; top: 120px; left: 40px;">
<span class="top2"></span>
<span class="middle2"></span>
<span class="bottom2"></span>
</div>
</BODY
</html>
推荐答案
从CSS中删除您的评论
Remove your comment from the css
像<!-- Second Hex-->和<!--hex 3-->
他们是越野车.
这些注释只能在HTML中使用，而不能用于css
These comments are meant to be in HTML only not for css
对于CSS使用此语法-> /* A comment */
for css use this syntax --> /* A comment */
这篇关于在CSS/HTML中创建六边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
