用border属性完成的拼接图
开发工具与关键技术:DW border属性
作者:徐晶旗
撰写时间:2019年2月24日
接下来我做的就比较简单了,我首先设置了一个大盒子,再到这个大盒子里设置几个类,把这些类拼接成我想要的效果图,把它们分别设置成正方形、三角形和长方形,然后拼接在一起让整个容器看上去是一个正方体。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小迷糊</title>
</head>
<link rel="stylesheet" href="../css/zd.css">
<body>
<div class="box">
<div class="one">
<div class="two"></div>
<div class="three">
<div class="four"></div>
<div class="five">
<div class="six">
<div class="seven"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Css代码块
@charset "utf-8";
/* CSS Document */
.box{
height:200px;
width:200px;
}
.one{
height:100px;
width:100px;
background:#FA8072;
top:100px;
left:200px;
position: absolute;
}
.two{
border-left:30px solid transparent;
border-bottom: 30px solid #E0FFFF;
top:-30px;
position: absolute;
}
.three{
width:70px;
height:30px;
background: #E0FFFF;
left:30px;
top:-30px;
position: absolute;
}
.four{
border-right: 30px solid transparent;
border-top: 30px solid #E0FFFF;
position: absolute;
left:70px;
}
.five{
border-left: 30px solid transparent;
border-bottom: 30px solid #FFC0CB;
position: absolute;
left:70px;
}
.six{
width:30px;
height:70px;
background: #FFC0CB;
left:-30px;
top:30px;
position: absolute;
}
.seven{
border-right: 30px solid transparent;
border-top: 30px solid #FFC0CB;
position: absolute;
top:70px;
}
最后完成的效果图