html代码
<span class="goods-rank">
<span class="goods-rank-child">
<span class="goods-rank-cc">
1
</span>
</span>
</span>
<span class="goods-rank">
<span class="goods-rank-child">
<span class="goods-rank-cc goods-rank-cc2">
2
</span>
</span>
</span>
<span class="goods-rank">
<span class="goods-rank-child">
<span class="goods-rank-cc goods-rank-cc3">
3
</span>
</span>
</span>
css代码
.goods-rank {
display: block;
width: 3vh;
height: 3.4vh;
line-height: 3.4vh;
text-align: center;
overflow: hidden;
vertical-align: middle;
transform: rotate(120deg);
}
.goods-rank-child {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
transform: rotate(-60deg);
}
.goods-rank-cc {
display: block;
width: 100%;
height:100%;
overflow: hidden;
transform: rotate(-60deg);
background-image: radial-gradient(rgba(255, 216, 33, 0),
rgba(255, 216, 33, 1));
}
.goods-rank-cc2{
background-image: radial-gradient(rgba(204, 203, 196, 0),
rgba(204, 203, 196, 1));
}
.goods-rank-cc3{
background-image: radial-gradient(rgba(228, 102, 2, 0),
rgba(228, 102, 2, 1));
}
效果样子
