<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div class="letter">
    
    <div class="content">hello css</div>
    <div class="cover">
      
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </div>
  
</body>
</html>

.letter{
  
  width:700px;
  margin:0 auto;
  background:#fff;
 
  
}

.content{
  
  width:91%;
  text-align:center;
  padding:20px 10px;
  height:500px;
  background:#fff;
  border-top:10px solid #eee;
  box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.10);
  margin: 0 auto;
  margin-bottom:-60px;
  /* 制作信封样式*/
  border-image:repeating-linear-gradient(-45deg,transparent 0,transparent 1em,#ffc9c7 0,#ffc9c7 2em ,#dcedff 0,transparent 0,transparent 3em,#dcedff 0,#dcedff 4em) 20;
 
  
}

.cover .box1{
  
  position:relative;
  margin-top:5px;
   width:100%;
  height:100px;
/*    使用圆锥渐变制作特殊部分样式*/
  background:conic-gradient(transparent 23% ,#fde5ca 0,#fde5ca 77%,transparent 0)
  
}

/*  制作左边小三角*/
.cover .box1::before{
  
   content:'';
   position:absolute;
   top:0px;
   border-top:6px solid transparent;
   border-bottom:3px solid transparent;
   border-right:20px solid #d29d65;
}

/*  制作右边小三角*/
.cover .box1::after{
  
   content:'';
   position:absolute;
   top:0px;
   right:0px;
   border-top:6px solid transparent;
   border-bottom:3px solid transparent;
   border-left:20px solid #d29d65;
}
.cover .box2{
  width:100%;
  height:100px;
  background:linear-gradient(#fde5ca 3%,#f9cba3 100%);
  border-radius:0 0 4% 4%;  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.