css3向上标签立体,CSS3 立体感的商品打折标签

CSS

语言：

CSSSCSS

确定

.product {

width: 300px;

font-family: sans-serif;

margin: 2%;

}

.product-image {

background: pink;

margin-bottom: 10px;

position: relative;

min-height: 250px;

}

.onsale-section {

position: absolute;

top: -6px;

right: 15px;

}

.onsale-section:after {

position: absolute;

content: '';

display: block;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 6px solid #6ec5d5;

}

.onsale {

position: relative;

display: inline-block;

text-align: center;

color: #fff;

background: #6ec5d5;

font-size: 14px;

line-height: 1;

padding: 12px 8px 6px;

border-top-right-radius: 8px;

width: 84px;

text-transform: uppercase;

}

.onsale:before,

.onsale:after {

position: absolute;

content: '';

display: block;

}

.onsale:before {

background: #6ec5d5;

height: 7px;

width: 6px;

left: -6px;

top: 0;

}

.onsale:after {

background: #96a0a2;

height: 7px;

width: 8px;

border-radius: 8px 8px 0 0;

left: -8px;

top: 0;

}

.product img {

display: block;

}