body{
  background: #ececec;
}

.box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  background: #fff;
  width: 600px;
  height: 400px;
  box-shadow: -10px 10px 10px rgba(0,0,0,.1);
}

.cover-text{
  margin: 20px;
  margin-top: 100px;
  text-align: center;
  font-size: 80px;
  font-weight: bold;
  color: #939393;
}

.band span{
  background: #3699d5;
  /* 视频中的CSS */
  /* background: #4E5C93; */
  /* 视频中的PHP */
  /* background: #FA8A2A; */
  /* 视频中的SVG */
  /* background: linear-gradient(to right, #355BC9, #6D38D7); */
  /* 视频中的Unboxing */

  color: #fff;
  
  width: 225px;
  font-size: 24px;
  font-weight: bold;
  padding: 8px 0;
  
  position: absolute;
  transform: rotate(45deg);
  left: -25px;
  top: 30px;
  text-shadow:0 1px 1px rgba(0,0,0,.2);
  text-align: center;
  box-shadow:0 10px 10px rgba(0,0,0,.1);
/*   这里其实是有所瑕疵的 */
/*   box-shadow:0 10px 10px black;
  作为阴影 形状是不对的 */
}

.band{
  position: absolute;
  width: 150px;
  height: 150px;
  overflow: hidden;
  top: -10px;
  right: -10px;
}
.band::before,
.band::after{
  border: 5px solid #2880b8;
  /* 视频中的CSS */
  /* border: 5px solid #434B77; */
  /* 视频中的PHP，Unboxing同 */
  /* border: 5px solid #E35B1B; */
  /* 视频中的SVG */

  content: '';
/*   要加content伪元素才能显示 */
  position: absolute;
  border-top-color: transparent;
  border-right-color: transparent;
/*   来形成三角形 */
}
.band::after{
  bottom: 0;
  right: 0;
}