盒子左上角三角形 css

 

<div class="pcode"><span class="picon"></span><span class="pimg">5.5折</span></div>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

.pcode {     position:relative;     width: 100%;     background-color: #ccc;     height: 70px; } .picon {      display: inline-block;      width: 0;      height: 0;      border-top: 37px solid #f00;      border-right: 37px solid transparent;      position: absolute;      top: 0;      left: 0;  }  .pimg {      color: #fff;      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: 0px;      top: -9px;      font-size: 12px;  }