1. 心形（Heart）
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart::before,
#heart::after {
position: absolute;
content: '';
top: 0;
left: 50px;
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%;
}
heart.png
2. 无穷（Infinity）
#infinity {
position: relative;
width: 212px;
height: 100px;
box-sizing: content-box;
}
#infinity::before,
#infinity::after {
position: absolute;
content: '';
box-sizing: content-box;
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);
}
infinity.png
3. 鸡蛋形（Egg）
#egg {
display: block;
width: 126px;
height: 180px;
background: red;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
egg.png
4. 吃豆人（Pac-Man）
#pacman {
width: 0;
height: 0;
border: 60px solid red;
border-right-color: transparent;
border-radius: 60px;
}
pacman.png
5. 聊天框（Talk Bubble）
#talkbubble {
width: 120px;
height: 80px;
background: red;
border-radius: 10px;
position: relative;
margin: 0 20px;
}
#talkbubble::before {
position: absolute;
content: '';
top: 26px;
right: 100%;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 17px solid red;
border-bottom: 13px solid transparent;
}
talkbubble.png
6. 六角星（Star (6-points)）
#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-six.png
7. 五角星（Star(5-points)）
#star-five {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
position: relative;
transform: rotate(35deg);
margin: 60px 0;
}
#star-five::before {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid red;
position: absolute;
content: '';
top: -45px;
left: -65px;
transform: rotate(-35deg);
}
#star-five::after {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
position: absolute;
content: '';
top: 3px;
left: -105px;
transform: rotate(-70deg);
}
star-five.png
8. 爆炸形状1（12 Point Burst）
#burst-12 {
width: 80px;
height: 80px;
background: red;
position: relative;
}
#burst-12::before,
#burst-12::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 80px;
height: 80px;
background: red;
}
#burst-12::before {
transform: rotate(30deg);
}
#burst-12::after {
transform: rotate(60deg);
}
burst-12.png
9. 爆炸形状2（8 Point Burst）
#burst-8 {
width: 80px;
height: 80px;
background: red;
position: relative;
transform: rotate(20deg);
}
#burst-8::before {
width: 80px;
height: 80px;
background: red;
position: absolute;
content: '';
top: 0;
left: 0;
transform: rotate(135deg);
}
burst-8.png
10. 阴阳（Yin Yang）
#yin-yang {
width: 100px;
height: 100px;
background: linear-gradient(to bottom, #000 0%,#000 50%,#fff 50%,#fff 100%);
border-radius: 50%;
border: 1px solid black;
position: relative;
}
#yin-yang::before {
position: absolute;
content: '';
top: 25px;
left: 0;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
border: 20px solid black;
box-sizing: content-box;
}
#yin-yang::after {
position: absolute;
content: '';
top: 25px;
left: 50px;
width: 10px;
height: 10px;
background: black;
border: 20px solid white;
border-radius: 50%;
box-sizing: content-box;
}
yinyang.png
11. 徽章丝带（Badge Ribbon）
#badge-ribbon {
width: 100px;
height: 100px;
background: red;
border-radius: 50px;
position: relative;
}
#badge-ribbon::before,
#badge-ribbon::after {
position: absolute;
content: '';
top: 70px;
left: -10px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 70px solid red;
transform: rotate(-140deg);
}
#badge-ribbon::after {
left: auto;
right: -10px;
transform: rotate(140deg);
}
badge-ribbon.png
12. 电视屏幕（TV Screen）
#tv {
width: 200px;
height: 150px;
position: relative;
background: red;
border-radius: 50% / 11%;
margin: 10px;
}
#tv::before {
position: absolute;
content: '';
top: 10%;
bottom: 10%;
left: -5%;
right: -5%;
background: inherit;
border-radius: 5% / 50%;
}
tv.png
13. Chevron
#chevron {
position: relative;
height: 60px;
width: 200px;
padding: 12px;
margin-bottom: 6px;
box-sizing: border-box;
}
#chevron::before {
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 51%;
background: red;
transform: skew(0,6deg);
}
#chevron::after {
position: absolute;
content: '';
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0,-6deg);
}
chevron.png
14. 放大镜（Magnifying Glass）
#magnifying-glass {
width: 0.4em;
height: 0.4em;
position: relative;
font-size: 10em;
border: 0.1em solid red;
border-radius: 0.35em;
}
#magnifying-glass::before {
position: absolute;
content: '';
right: -0.25em;
bottom: -0.1em;
width: 0.35em;
height: 0.08em;
background: red;
transform: rotate(45deg);
}
magnifying-glass.png
15. 脸书图标（Facebook Icon）
#facebook-icon {
background: red;
width: 100px;
height: 110px;
border: 15px solid red;
border-radius: 5px;
overflow: hidden;
position: relative;
border-bottom: 0;
box-sizing: content-box;
}
#facebook-icon::before {
position: absolute;
content: '';
bottom: -30px;
right: -37px;
width: 40px;
height: 90px;
border: 20px solid #eee;
border-radius: 25px;
background: red;
box-sizing: content-box;
}
#facebook-icon::after {
position: absolute;
content: '';
top: 50px;
right: 5px;
width: 55px;
height: 20px;
background: #eee;
box-sizing: content-box;
}
facebook-icon.png
16. 月亮（Moon）
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
moon.png
17. 旗帜（Flag）
#flag {
width: 110px;
height: 56px;
background: red;
padding-top: 15px;
box-sizing: content-box;
position: relative;
}
#flag::after {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid #eeeeee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
flag.png
18. 圆锥形（Cone）
#cone {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 100px solid red;
border-radius: 50%;
}
cone.png
19. 十字（Cross）
#cross {
width: 20px;
height: 100px;
background: red;
position: relative;
margin: 0 40px;
}
#cross::after {
position: absolute;
content: '';
top: 40px;
left: -40px;
width: 100px;
height: 20px;
background: red;
}
cross.png
20. Base
#base {
width: 100px;
height: 55px;
background: red;
position: relative;
margin-left: 20px;
margin-top: 55px;
display: inline-block;
}
#base::before {
position: absolute;
content: '';
top: -35px;
left: 0;
width: 0;
height: 0;
border-bottom: 35px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
base.png
参考链接
- Chris Coyier, The Shapes of CSS
