谷歌图标在css中如何表示,CSS3 谷歌Drive的图标

CSS

语言：

CSSSCSS

确定

html,

body {

font-family: "Roboto", sans-serif;

margin: 0;

background: #eee;

height: 100vh;

width: 100%;

position: relative;

}

.logo-container {

position: absolute;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 320px;

height: 280px;

}

.logo-container .bar {

height: 100px;

width: 200px;

position: absolute;

}

.logo-container .green {

background-color: #0BA25E;

-webkit-transform: rotate(-60deg) skew(-30deg);

transform: rotate(-60deg) skew(-30deg);

left: -20px;

top: 90px;

height: 100.5px;

z-index: 2;

box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.2);

}

.logo-container .yellow {

background-color: #FCCD48;

-webkit-transform: rotate(60deg) skew(-30deg);

transform: rotate(60deg) skew(-30deg);

left: 108px;

top: 40px;

z-index: 3;

box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3);

}

.logo-container .blue {

background-color: #2A71E9;

-webkit-transform: skew(-30deg) translate(0, -50%);

transform: skew(-30deg) translate(0, -50%);

top: 227px;

left: 58.5px;

z-index: 1;

box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);

}