CSS常用形状

一、对话框

<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>