【css】 三角形--左上角

效果

 

 

代码

  .step-dom{
         position: relative;
         padding: 35px 35px 12px 35px;
         border-bottom: 4px solid #e8e8e8;
         .triangle-topleft {
             display: inline-block;
             width: 0;
             height: 0;
             border-top: 52px solid #d9d9d9;
             border-right: 60px solid transparent;
             position: absolute;
             top: 0;
             left: 0;
         }
         .ribbon-green {
             color: rgb(95, 28, 204);
             text-align: center;
             text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
             -webkit-transform: rotate(-45deg);
             transform: rotate(-45deg);
             -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
             position: absolute;
             padding: 10px 0;
             left: 1px;
             top: -1px;
             font-size: 12px;
         }
     }