一、对话框

<div class="talk-bubble"></div>
<style>.talk-bubble {position: relative;width: 120px;height: 80px;background: #409EFF;border-radius: 8px;}.talk-bubble::before {content: "";position: absolute;right: 100%;top: 50%;width: 0;height: 0;border-top: 12px solid transparent;border-right: 22px solid #409EFF;border-bottom: 12px solid transparent;transform: translate(0, -50%);}
</style>

二、无限符号

<div class="infinity"></div>
<style>.infinity {position: relative;width: 140px;height: 70px;}.infinity::after,.infinity::before {content: "";position: absolute;top: 0;left: 0;width: 50%;height: 100%;border: 20px solid #409EFF;border-radius: 50% 50% 0 50%;transform: rotate(-45deg);}.infinity::after {left: auto;right: -100px;border-radius: 50% 50% 50% 0;transform: rotate(45deg);}
</style>

三、放大镜

<div class="magnifying-glass"></div>
<style>.magnifying-glass {position: relative;width: 100px;height: 100px;border: 15px solid #409EFF;border-radius: 50%;}.magnifying-glass::before {content: "";position: absolute;right: -80%;bottom: -40%;width: 100%;height: 25%;border-width: 0;background: #409EFF;transform: rotate(45deg);}
</style>

四、月牙

<div class="crescent"></div>
<style>.crescent {width: 80px;height: 80px;border-radius: 50%;box-shadow: 15px 15px 0 0 #409EFF;}
</style>

五、加号

<div class="plus"></div>
<style>.plus {position: relative;width: 20px;height: 100px;background: #409EFF;}.plus::after {content: "";position: absolute;top: 50%;left: 50%;width: 100px;height: 20px;transform: translate(-50%, -50%);background: #409EFF;}
</style>

六、叉号

<div class="cross"></div>
<style>.cross {width: 100px;height: 100px;background-color: #409EFF;clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);}
</style>

七、标签

<div class="label"></div>
<style>.label {position: relative;width: 180px;height: 60px;background-color: #409EFF;/* 阴影 */filter: drop-shadow(0px 0px 2px #000);}.label::after {content: "";position: absolute;left: 100%;top: 0;border: 30px solid transparent;border-left-color: #409EFF;}
</style>

八、圆角三角形

<div class="round-triangle"></div>
<style>.round-triangle {position: relative;background-color: #409EFF;transform: rotate(-60deg) skewX(-30deg) scale(1, .866);}.round-triangle,.round-triangle::after,.round-triangle::before {width: 100px;height: 100px;border-top-right-radius: 30%;}.round-triangle::after,.round-triangle::before {content: '';position: absolute;background-color: inherit;}.round-triangle::before {transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);}.round-triangle::after {transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);}
</style>

九、普通三角形

<div class="triangle"></div>
<style>.triangle {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid #409EFF;}
</style>

十、五角星🇨🇳

<div class="star-5"></div>
<style>.star-5 {position: relative;width: 0px;height: 0px;margin: 50px 0;border-right: 100px solid transparent;border-bottom: 70px solid #FAF408;border-left: 100px solid transparent;transform: rotate(35deg);}.star-5::after {content: '';position: absolute;top: 3px;left: -105px;width: 0px;height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid #FAF408;border-left: 100px solid transparent;transform: rotate(-70deg);}.star-5::before {content: '';position: absolute;top: -45px;left: -65px;height: 0;width: 0;border-bottom: 80px solid #FAF408;border-left: 30px solid transparent;border-right: 30px solid transparent;transform: rotate(-35deg);}
</style>

十一、平行四边形

<div class="parallelogram"></div>
<style>.parallelogram {width: 150px;height: 100px;transform: skew(20deg);background: #409EFF;}
</style>

十二、六边形

<div class="hexagon"></div>
<style>.hexagon {position: relative;width: 100px;height: 58px;background: #409EFF;}.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 #409EFF;}.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 #409EFF;}
</style>

十三、钻石

<div class="diamond"></div>
<style>.diamond {position: relative;height: 0;width: 50px;border-style: solid;border-color: transparent transparent #409EFF transparent;border-width: 0 25px 25px 25px;}.diamond::after {content: "";position: absolute;top: 25px;left: -25px;width: 0;height: 0;border-style: solid;border-color: #409EFF transparent transparent transparent;border-width: 70px 50px 0 50px;}
</style>

十四、长方形折角效果

<div class="fold-angle"></div>
<style>.fold-angle {position: relative;width: 200px;height: 100px;background: linear-gradient(-150deg, transparent 1.5em, #409EFF 0);border-radius: .5em;}.fold-angle::before {content: '';position: absolute;top: 0;right: 0;background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .4)) 100% 0 no-repeat;width: 1.73em;height: 3em;transform: translateY(-1.3em) rotate(-30deg);transform-origin: bottom right;border-bottom-left-radius: inherit;box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);}
</style>