.ribbon{background:#3c485f;color:#fff;height:18px;line-height:18px;font-size:8px;text-align:center;width:40px;position:relative;margin:0 auto 1px}.ribbon:after,.ribbon:before{content:"";border:9px solid #3c485f;border-left-width:7px;position:absolute;top:0}.ribbon:before{border-left-color:rgba(0,0,0,0);left:-15px}.ribbon:after{border-left-color:#3c485f;right:-15px}.ribbon-2{--f:0px;--r:15px;--t:10px;position:absolute;margin-top:12px;inset:var(--t) calc(-1*var(--f)) auto auto;padding:0 10px var(--f) calc(10px + var(--r));background:#bd1550;box-shadow:0 calc(-1*var(--f)) 0 inset rgba(0,0,0,.3333333333);color:#fff;border-top-left-radius:var(--r);border-bottom-left-radius:var(--r)}.box{margin:0 auto;position:relative}