Last active
May 31, 2019 17:57
-
-
Save longfeixiang/a0ae8978172f1d45d6ce74af3921bae7 to your computer and use it in GitHub Desktop.
[常用图标的css实现]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 正方形 | |
#square { | |
width: 100px; | |
height: 100px; | |
background: red; | |
} | |
// 长方形 | |
#rectangle { | |
width: 200px; | |
height: 100px; | |
background: red; | |
} | |
// 圆形 | |
#circle { | |
width: 100px; | |
height: 100px; | |
background: red; | |
border-radius: 50% | |
} | |
// 椭圆 | |
#oval { | |
width: 200px; | |
height: 100px; | |
background: red; | |
border-radius: 100px / 50px; | |
} | |
// 上三角形 | |
#triangle-up { | |
width: 0; | |
height: 0; | |
border-left: 50px solid transparent; | |
border-right: 50px solid transparent; | |
border-bottom: 100px solid red; | |
} | |
// 左上角 | |
#triangle-topleft { | |
width: 0; | |
height: 0; | |
border-top: 100px solid red; | |
border-right: 100px solid transparent; | |
} | |
// 箭头 | |
#curvedarrow { | |
position: relative; | |
width: 0; | |
height: 0; | |
border-top: 9px solid transparent; | |
border-right: 9px solid red; | |
transform: rotate(10deg); | |
} | |
#curvedarrow:after { | |
content: ""; | |
position: absolute; | |
border: 0 solid transparent; | |
border-top: 3px solid red; | |
border-radius: 20px 0 0 0; | |
top: -12px; | |
left: -9px; | |
width: 12px; | |
height: 12px; | |
transform: rotate(45deg); | |
} | |
// 梯形 | |
#trapezoid { | |
border-bottom: 100px solid red; | |
border-left: 25px solid transparent; | |
border-right: 25px solid transparent; | |
height: 0; | |
width: 100px; | |
} | |
// 平行四边形 | |
#parallelogram { | |
width: 150px; | |
height: 100px; | |
transform: skew(20deg); | |
background: red; | |
} | |
// 六角星 | |
#star-six { | |
width: 0; | |
height: 0; | |
border-left: 50px solid transparent; | |
border-right: 50px solid transparent; | |
border-bottom: 100px solid red; | |
position: relative; | |
} | |
#star-six:after { | |
width: 0; | |
height: 0; | |
border-left: 50px solid transparent; | |
border-right: 50px solid transparent; | |
border-top: 100px solid red; | |
position: absolute; | |
content: ""; | |
top: 30px; | |
left: -50px; | |
} | |
// 五角星 | |
#star-five { | |
margin: 50px 0; | |
position: relative; | |
display: block; | |
color: red; | |
width: 0px; | |
height: 0px; | |
border-right: 100px solid transparent; | |
border-bottom: 70px solid red; | |
border-left: 100px solid transparent; | |
transform: rotate(35deg); | |
} | |
#star-five:before { | |
border-bottom: 80px solid red; | |
border-left: 30px solid transparent; | |
border-right: 30px solid transparent; | |
position: absolute; | |
height: 0; | |
width: 0; | |
top: -45px; | |
left: -65px; | |
display: block; | |
content: ''; | |
transform: rotate(-35deg); | |
} | |
#star-five:after { | |
position: absolute; | |
display: block; | |
color: red; | |
top: 3px; | |
left: -105px; | |
width: 0px; | |
height: 0px; | |
border-right: 100px solid transparent; | |
border-bottom: 70px solid red; | |
border-left: 100px solid transparent; | |
transform: rotate(-70deg); | |
content: ''; | |
} | |
// 五边形 | |
#pentagon { | |
position: relative; | |
width: 54px; | |
box-sizing: content-box; | |
border-width: 50px 18px 0; | |
border-style: solid; | |
border-color: red transparent; | |
} | |
#pentagon:before { | |
content: ""; | |
position: absolute; | |
height: 0; | |
width: 0; | |
top: -85px; | |
left: -18px; | |
border-width: 0 45px 35px; | |
border-style: solid; | |
border-color: transparent transparent red; | |
} | |
// 六边形 | |
#hexagon { | |
width: 100px; | |
height: 55px; | |
background: red; | |
position: relative; | |
} | |
#hexagon:before { | |
content: ""; | |
position: absolute; | |
top: -25px; | |
left: 0; | |
width: 0; | |
height: 0; | |
border-left: 50px solid transparent; | |
border-right: 50px solid transparent; | |
border-bottom: 25px solid red; | |
} | |
#hexagon:after { | |
content: ""; | |
position: absolute; | |
bottom: -25px; | |
left: 0; | |
width: 0; | |
height: 0; | |
border-left: 50px solid transparent; | |
border-right: 50px solid transparent; | |
border-top: 25px solid red; | |
} | |
// 八边形 | |
#octagon { | |
width: 100px; | |
height: 100px; | |
background: red; | |
position: relative; | |
} | |
#octagon:before { | |
content: ""; | |
width: 100px; | |
height: 0; | |
position: absolute; | |
top: 0; | |
left: 0; | |
border-bottom: 29px solid red; | |
border-left: 29px solid #eee; | |
border-right: 29px solid #eee; | |
} | |
#octagon:after { | |
content: ""; | |
width: 100px; | |
height: 0; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
border-top: 29px solid red; | |
border-left: 29px solid #eee; | |
border-right: 29px solid #eee; | |
} | |
// 爱心 | |
#heart { | |
position: relative; | |
width: 100px; | |
height: 90px; | |
} | |
#heart:before, | |
#heart:after { | |
position: absolute; | |
content: ""; | |
left: 50px; | |
top: 0; | |
width: 50px; | |
height: 80px; | |
background: red; | |
border-radius: 50px 50px 0 0; | |
transform: rotate(-45deg); | |
transform-origin: 0 100%; | |
} | |
#heart:after { | |
left: 0; | |
transform: rotate(45deg); | |
transform-origin: 100% 100%; | |
} | |
// 无穷大 | |
#infinity { | |
position: relative; | |
width: 212px; | |
height: 100px; | |
box-sizing: content-box; | |
} | |
#infinity:before, | |
#infinity:after { | |
content: ""; | |
box-sizing: content-box; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 60px; | |
height: 60px; | |
border: 20px solid red; | |
border-radius: 50px 50px 0 50px; | |
transform: rotate(-45deg); | |
} | |
#infinity:after { | |
left: auto; | |
right: 0; | |
border-radius: 50px 50px 50px 0; | |
transform: rotate(45deg); | |
} | |
// 菱形 | |
#diamond { | |
width: 0; | |
height: 0; | |
border: 50px solid transparent; | |
border-bottom-color: red; | |
position: relative; | |
top: -50px; | |
} | |
#diamond:after { | |
content: ''; | |
position: absolute; | |
left: -50px; | |
top: 50px; | |
width: 0; | |
height: 0; | |
border: 50px solid transparent; | |
border-top-color: red; | |
} | |
// 钻石 | |
#cut-diamond { | |
border-style: solid; | |
border-color: transparent transparent red transparent; | |
border-width: 0 25px 25px 25px; | |
height: 0; | |
width: 50px; | |
box-sizing: content-box; | |
position: relative; | |
margin: 20px 0 50px 0; | |
} | |
#cut-diamond:after { | |
content: ""; | |
position: absolute; | |
top: 25px; | |
left: -25px; | |
width: 0; | |
height: 0; | |
border-style: solid; | |
border-color: red transparent transparent transparent; | |
border-width: 70px 50px 0 50px; | |
} | |
// 鸡蛋 | |
#egg { | |
display: block; | |
width: 126px; | |
height: 180px; | |
background-color: red; | |
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; | |
} | |
// 吃豆人 | |
#pacman { | |
width: 0px; | |
height: 0px; | |
border-right: 60px solid transparent; | |
border-top: 60px solid red; | |
border-left: 60px solid red; | |
border-bottom: 60px solid red; | |
border-top-left-radius: 60px; | |
border-top-right-radius: 60px; | |
border-bottom-left-radius: 60px; | |
border-bottom-right-radius: 60px; | |
} | |
// 对话框 | |
#talkbubble { | |
width: 120px; | |
height: 80px; | |
background: red; | |
position: relative; | |
-moz-border-radius: 10px; | |
-webkit-border-radius: 10px; | |
border-radius: 10px; | |
} | |
#talkbubble:before { | |
content: ""; | |
position: absolute; | |
right: 100%; | |
top: 26px; | |
width: 0; | |
height: 0; | |
border-top: 13px solid transparent; | |
border-right: 26px solid red; | |
border-bottom: 13px solid transparent; | |
} | |
// 太极 | |
#yin-yang { | |
width: 96px; | |
box-sizing: content-box; | |
height: 48px; | |
background: #eee; | |
border-color: red; | |
border-style: solid; | |
border-width: 2px 2px 50px 2px; | |
border-radius: 100%; | |
position: relative; | |
} | |
#yin-yang:before { | |
content: ""; | |
position: absolute; | |
top: 50%; | |
left: 0; | |
background: #eee; | |
border: 18px solid red; | |
border-radius: 100%; | |
width: 12px; | |
height: 12px; | |
box-sizing: content-box; | |
} | |
#yin-yang:after { | |
content: ""; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
background: red; | |
border: 18px solid #eee; | |
border-radius: 100%; | |
width: 12px; | |
height: 12px; | |
box-sizing: content-box; | |
} | |
// 勋章 | |
#badge-ribbon { | |
position: relative; | |
background: red; | |
height: 100px; | |
width: 100px; | |
border-radius: 50px; | |
} | |
#badge-ribbon:before, | |
#badge-ribbon:after { | |
content: ''; | |
position: absolute; | |
border-bottom: 70px solid red; | |
border-left: 40px solid transparent; | |
border-right: 40px solid transparent; | |
top: 70px; | |
left: -10px; | |
transform: rotate(-140deg); | |
} | |
#badge-ribbon:after { | |
left: auto; | |
right: -10px; | |
transform: rotate(140deg); | |
} | |
// 放大镜 | |
#magnifying-glass { | |
font-size: 10em; | |
display: inline-block; | |
width: 0.4em; | |
box-sizing: content-box; | |
height: 0.4em | |
border: 0.1em solid red; | |
position: relative; | |
border-radius: 0.35em; | |
} | |
#magnifying-glass:before { | |
content: ""; | |
display: inline-block; | |
position: absolute; | |
right: -0.25em; | |
bottom: -0.1em; | |
border-width: 0; | |
background: red; | |
width: 0.35em; | |
height: 0.08em; | |
transform: rotate(45deg); | |
} | |
// facebook图标 | |
#facebook-icon { | |
background: red; | |
text-indent: -999em; | |
width: 100px; | |
height: 110px; | |
box-sizing: content-box; | |
border-radius: 5px; | |
position: relative; | |
overflow: hidden; | |
border: 15px solid red; | |
border-bottom: 0; | |
} | |
#facebook-icon:before { | |
content: "/20"; | |
position: absolute; | |
background: red; | |
width: 40px; | |
height: 90px; | |
bottom: -30px; | |
right: -37px; | |
border: 20px solid #eee; | |
border-radius: 25px; | |
box-sizing: content-box; | |
} | |
#facebook-icon:after { | |
content: "/20"; | |
position: absolute; | |
width: 55px; | |
top: 50px; | |
height: 20px; | |
background: #eee; | |
right: 5px; | |
box-sizing: content-box; | |
} | |
// 月亮 | |
#moon { | |
width: 80px; | |
height: 80px; | |
border-radius: 50%; | |
box-shadow: 15px 15px 0 0 red; | |
} | |
// 指示器 | |
#pointer { | |
width: 200px; | |
height: 40px; | |
position: relative; | |
background: red; | |
} | |
#pointer:after { | |
content: ""; | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
width: 0; | |
height: 0; | |
border-left: 20px solid white; | |
border-top: 20px solid transparent; | |
border-bottom: 20px solid transparent; | |
} | |
#pointer:before { | |
content: ""; | |
position: absolute; | |
right: -20px; | |
bottom: 0; | |
width: 0; | |
height: 0; | |
border-left: 20px solid red; | |
border-top: 20px solid transparent; | |
border-bottom: 20px solid transparent; | |
} | |
// 锁 | |
#lock { | |
font-size: 8px; | |
position: relative; | |
width: 18em; | |
height: 13em; | |
border-radius: 2em; | |
top: 10em; | |
box-sizing: border-box; | |
border: 3.5em solid red; | |
border-right-width: 7.5em; | |
border-left-width: 7.5em; | |
margin: 0 0 6rem 0; | |
} | |
#lock:before { | |
content: ""; | |
box-sizing: border-box; | |
position: absolute; | |
border: 2.5em solid red; | |
width: 14em; | |
height: 12em; | |
left: 50%; | |
margin-left: -7em; | |
top: -12em; | |
border-top-left-radius: 7em; | |
border-top-right-radius: 7em; | |
} | |
#lock:after { | |
content: ""; | |
box-sizing: border-box; | |
position: absolute; | |
border: 1em solid red; | |
width: 5em; | |
height: 8em; | |
border-radius: 2.5em; | |
left: 50%; | |
top: -1em; | |
margin-left: -2.5em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment