css盒子左上角附加斜矩形.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    *{margin:0 ;padding: 0;}
    .box{
        width: 92%;
      	position: relative;
      	height: 170px;
      	background: linear-gradient(135deg,#FFD083 25%, #FFE28C 0, #FFE28C 50%,#FFD083 0, #FFD083 75%, #FFE28C 0);
      	background-size: 40px 40px;
      	border-radius: 4px;
     }
     .box:before{
        content: '';
        position: absolute;
        bottom: -15px;
        right: 16px;
        height: 50px;
        width: 0;
        border-left: 12px solid #F85E51;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        transform: rotate(-135deg);
        -webkit-transform: rotate(-315deg);
        transform-origin: 50% 50%;
     }
  </style>
</head>
<body>
  <div class="box">
  </div>
</body>
</html>