CSS3六边形

作者: beiyu 分类: CSS3 发布时间: 2016-06-26 17:41

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3六边形</title>
</head>
<body>
<style>
.hex-box-top{height: 0; width: 0; border-bottom: 30px solid #C66; border-left: 52px solid transparent; border-right: 52px solid transparent;}
.hex-box-bottom{height: 0; width: 0; border-top: 30px solid #C66; border-left: 52px solid transparent; border-right: 52px solid transparent;}
.hex-box-mid{width: 104px; height: 60px; background-color: #C66;}

.hex-box-left{float: left; height: 0; width: 0; border-left: 28px solid #C66; border-top: 50px solid transparent; border-bottom: 50px solid transparent;}
.hex-box-right{float: left; height: 0; width: 0; border-right: 28px solid #C66; border-top: 50px solid transparent; border-bottom: 50px solid transparent;}
.hex-box-mid1{float: left; width: 56px; height: 100px; background-color: #C66;}
</style>

<div class="hex-box-top"></div>
<div class="hex-box-mid"></div>
<div class="hex-box-bottom"></div>

<div class="hex-box">
<div class="hex-box-right"></div>
<div class="hex-box-mid1"></div>
<div class="hex-box-left"></div>
</div>

</body>
</html>
[/html]

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

30 + = 36