html中购物车图标,纯CSS3实现单元素购物车图标

CSS

语言：

CSSSCSS

确定

.shopping-cart {

width: 100px;

height: 100px;

background-color: rgb(0, 180, 255);

position: relative;

border: 27px solid rgb(0, 180, 255);

background-image: linear-gradient( transparent 37%, rgb(7, 38, 67) 0, rgb(7, 38, 67) 40%, transparent 0);

background-origin: border-box;

}

.shopping-cart::before {

content: '';

position: absolute;

top: 50%;

left: 50%;

height: 13px;

width: 20px;

background-image: linear-gradient( transparent 23%, rgb(7, 38, 67) 0, rgb(7, 38, 67) 30%, transparent 0, transparent 60%, rgb(7, 38, 67) 0, rgb(7, 38, 67) 70%, transparent 0), linear-gradient( 90deg, transparent 25%, rgb(7, 38, 67) 0, rgb(7, 38, 67) 30%, transparent 0, transparent 65%, rgb(7, 38, 67) 0, rgb(7, 38, 67) 70%, transparent 0);

b