css实现折纸边缘阴影效果代码-html代码-BFW代码库

css实现折纸边缘阴影效果代码

代码语言：html

代码描述：css实现折纸边缘阴影效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body{
  background:black;
}
.contenedor{
  position:relative;
  width:800px;
  height:600px;
  background:white;
  margin:221px auto;
  overflow:hidden;
}
.mapa{
  position:absolute;
  margin:0 0px;
}
.rect1{
  position: absolute;
  height: 650px;
  width: 160px;
  background: #987654;
  opacity:.6;
}
.rect2{
  position: absolute;
  height: 650px;
  width: 160px;
  background: #FEE4C3;
  opacity:.5;
  margin:0 160px
}
.rect3{
  position: absolute;
  height: 650px;
  width: 160px;
  background: #CBBF97;
  opacity:.6;
  margin:0 320px
}
.rect4{
  position: absolute;
  height: 650px;
  width: 160px;
  background: #FEE4C3;
  opacity:.5;
  margin:0 480px
}
.rect5{
  position: absolute;
  height: 650px;
  width: 160px;
  background: #AC783C;
  opacity:.5;
  margin:0 640px
}
.cuadro{
  position:absolute;
  width:780px;
  height:580px;
  background:#5AD7E8;
  margin:0px 00px;
  border:9px solid white;
}
.i1{
  position:absolute;
  width:231px;
  height:121px;
  border-radius:21px;
  background:#06D865;
  margin:50px 75px
}
.i1::before{
  content:"";
  position:absolute;
  width:231px;
  height:121px;
  border-radius:21px;
  background:#06D865;
  margin:90px 35px
}
.i1::after{
  content:"";
  position:absolute;
  width:251px;
  height:102px;
  border-radius:21px;
  background:#06D865;
  margin:182px -33px
}
.i2{
  position:absolute;
  width:192px;
  height:112px;
  border-radius:21px;
  background:#06D865;
  margin:291px 75px
}
.i2::before{
  content:"";
  position:absolute;
  width:231px;
  height:70px;
  border-radius:21px;
  background:#06D865;
  margin:90px 35px
}
.i2::after{
  content:"";
  position:absolute;
  width:251px;
  height:80px;
  border-radius:21px;
  background:#06D865;
  margin:152px -33px
}
.i3{
  position:absolute;
  width:212px;
  height:102px;
  border-radius:21px;
  background:#06D865;
  margin:201px 475px
}
.i3::before{
  content:"";
  position:absolute;
  width:231px;
  height:70px;
  border-radius:21px;
  background:#06D865;
  margin:90px 21px
}
.i3::after{
  content:"";
  position:absolute;
  width:251px;
  height:70px;
  border-radius:21px;
  background:#06D865;
  margin:152px -21px
}
.lago{
  position:absolute;
  width:121px;
  height:95px;
  border-radius:100%;
  background:#18c8e2;
  margin:152px 142px;
  box-shadow: -3px -3px 3px 3px rgba(0,123,184,1);
  }
.sierra{
  position:absolute;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #773403;
  margin:85px 102px
}
.sierra::after{
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 60px solid #bc300d;
  margin:-10px -5px
}
.sierra::before{
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #51230D ;
  margin:0px 21px
}
.arb5,.arb6,.arb7,.arb8,.arb9,.arb12,.arb21,.arb30,.arb33,.arb36, .arb37,.arb38,.arb39{
  position:absolute;
  width:9px;
  height:40px;
  background:#51230D;
  }
.arb5::be.........完整代码请登录后点击上方下载按钮下载查看