45个值得收藏的CSS形状(8)

33.徽章丝带

#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);  
}  

34.太空入侵者(电脑游戏名)

#space-invader {  
box-shadow: 0 0 0 1em red,  
0 1em 0 1em red,  
-2.5em 1.5em 0 .5em red,  
2.5em 1.5em 0 .5em red,  
-3em -3em 0 0 red,  
3em -3em 0 0 red,  
-2em -2em 0 0 red,  
2em -2em 0 0 red,  
-3em -1em 0 0 red,  
-2em -1em 0 0 red,  
2em -1em 0 0 red,  
3em -1em 0 0 red,  
-4em 0 0 0 red,  
-3em 0 0 0 red,  
3em 0 0 0 red,  
4em 0 0 0 red,  
-5em 1em 0 0 red,  
-4em 1em 0 0 red,  
4em 1em 0 0 red,  
5em 1em 0 0 red,  
-5em 2em 0 0 red,  
5em 2em 0 0 red,  
-5em 3em 0 0 red,  
-3em 3em 0 0 red,  
3em 3em 0 0 red,  
5em 3em 0 0 red,  
-2em 4em 0 0 red,  
-1em 4em 0 0 red,  
1em 4em 0 0 red,  
2em 4em 0 0 red;  
background: red;  
width: 1em;  
height: 1em;  
overflow: hidden;  
margin: 50px 0 70px 65px;  
}  

35.电视

#tv {  
position: relative;  
width: 200px;  
height: 150px;  
margin: 20px 0;  
background: red;  
border-radius: 50% / 10%;  
color: white;  
text-align: center;  
text-indent: .1em;  
}  
#tv:before {  
content: '';  
position: absolute;  
top: 10%;  
bottom: 10%;  
right: -5%;  
left: -5%;  
background: inherit;  
border-radius: 5% / 50%;  
}  

（编辑：ASP站长网）