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%;
}
复制代码

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);
}
复制代码

3. 鸡蛋形（Egg）

#egg {display: block;width: 126px;height: 180px;background: red;border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
复制代码

4. 吃豆人（Pac-Man）

#pacman {width: 0;height: 0;border: 60px solid red;border-right-color: transparent;border-radius: 60px;
}
复制代码

5. 聊天框（Talk Bubble）

#talkbubble {width: 120px;height: 80px;background: red;border-radius: 10px;position: relative;
}
#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;
}
复制代码

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;
}
复制代码

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);
}
复制代码

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);
}
复制代码

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);
}
复制代码

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;
}
复制代码

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);
}
复制代码

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%;
}
复制代码

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);
}
复制代码

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;box-sizing: content-box;
}
#magnifying-glass::before {position: absolute;content: '';right: -0.25em;bottom: -0.1em;width: 0.35em;height: 0.08em;background: red;transform: rotate(45deg);
}
复制代码

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;
}
复制代码

16. 月亮（Moon）

#moon {width: 80px;height: 80px;border-radius: 50%;box-shadow: 15px 15px 0 0 red;
}
复制代码

参考链接

• Chris Coyier, The Shapes of CSS