<style>.box { border: 2px solid #000000; width: 400px; height: 400px; float: left; } .box_content { border: 2px solid #7FFFD4; width: 196px; height: 196px; float: right; } .box_content p { float: left; } .box_top { width: 202px; float: left; border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 100px solid #1E74CC; } .box_bottom { width: 202px; float: left; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid #7FFFD4; margin-top: 200px; } .box_left { height: 300px; border-left: 100px solid #8FBC8F; border-right: 100px solid transparent; border-bottom: 100px solid transparent; } .box_right { height: 200px; border-left: 100px solid transparent; border-right: 100px solid #DAA520; border-bottom: 100px solid transparent; } </style><body> <div class="box" class="clearfix"> <div class="box_top"> </div> <div class="box_bottom"> </div> <div class="box_left"> </div> <div class="box_content"> <p>1</p> </div> <div class="box_right" > </div> </div></body>
2 回答
已采纳
stone310
TA贡献361条经验 获得超191个赞
<style>
*{margin:0 ;padding:0}
.box {
border: 2px solid #000000;
width: 400px;
height: 400px;
float: left;
}
.box_content {
border: 2px solid #7FFFD4;
width: 196px;
height: 196px;
margin: 100px;
position: absolute;
}
.box_content p {
float: left;
}
.box_top {
width: 200px;
position:absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid #1E74CC;
}
.box_bottom {
width: 200px;
position:absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #7FFFD4;
top: 302px;
}
.box_left {
float:left;
height: 200px;
border-left: 100px solid #8FBC8F;
border-bottom: 100px solid transparent;
border-top:100px solid transparent;
}
.box_right {
float:right;
height: 200px;
border-right: 100px solid #DAA520;
border-bottom: 100px solid transparent;
border-top:100px solid transparent;
}
</style>
weibo_一脸懵逼Oo_04021341
TA贡献8条经验 获得超0个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{float:left;margin-right:5px;}
.outset{padding:10px;border-bottom:10px outset red;background:white;}
.outset{padding:10px;border-top: 10px outset blue;background:white;}
.outset{padding:10px;border-left: 10px outset yellow;background:white;}
.outset{padding:10px;border-right: 10px outset green;background:white;}
</style>
</head>
<body>
<div>outset</div>
</body>
</html>- 2 回答
- 0 关注
- 1570 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消