我想知道如何实现这个效果用css
<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
<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>00 -
weibo_一脸懵逼Oo_04021341
<!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>00