.ribbon { background: #45c9c8; position: absolute; 75px; height: 25px; line-height: 25px; top: -4px; left: -11px; font-size: 14px; color: #fff; text-align: center; font-style: normal; z-index: 1; &:after{ content: ""; position: absolute; 0; height: 0; border-left: 12px solid transparent; border-top: 5px solid #329c9b; top: 25px; left: 0px; z-index: 0; } &:before{ content: ""; position: absolute; right: -10px; font-size: 14px; color: #fff; z-index: 1; 0; height: 0; border-top: 13.5px solid #45c9c8; border-left: 5px solid #45c9c8; border-right: 10px solid transparent; border-bottom: 12.5px solid #45c9c8; } }
利用伪选择器after和before写了一个丝带标签