2018年10月24日阅读 409235

CSS画各种图形（五角星、吃豆人、太极图等）

这里说的用css做图形，其实是使用一个html元素，结合它的伪元素 ::before & ::after （不需要其他额外的非伪元素的html元素），然后定义样式来生成所需的图形。

这里不是说不可以使用其它的html元素，只是这样的好处是在html方便引入，而不需要每次引入都需要添加大量的html片段（夸张说法）。可以先预览演示地址

主要方法

可以使用的样式属性如下：

* border
* border-radius
* transform
* box-shadow

为了兼容性，使用pseudo-elements(::before, ::after) 和上面样式属性中的一种或几种随机组合。

当然，在前端我们经常使用的时svg和font-icon。

还用一种是css3的shape-outside实现文本环绕的效果。

下面主要介绍第一种。

等腰直角三角形(直角位置左上)
等腰直角三角形(直角位置右上)
等腰直角三角形(直角位置左下)
等腰直角三角形(直角位置右下)
等边三角形（箭头朝上）
等边三角形（箭头朝下）
等边三角形（箭头朝左）
等边三角形（箭头朝右）
矩形形
正方形
正五边形
正六边形
正七边形
正八边形
平行四边形
圆形
椭圆形
梯形
扇形

星形

五角星
六角星
八角星形
十二角星形

卡通图形

吃豆人
外星入侵者
鸡蛋

图标图形

facebook
锁
放大镜
星形
心形
月亮
徽章
电视
标签
十字形
方向标
返回箭头

钻石图形

四方形钻
‘盾’形钻
‘菱形’钻
‘切割’钻

其他

太极图

图形列表

shape-square

    #square {
        width: 100px;
        height: 100px;
        background: red;
    }

shape-rctangle

    #rectangle {
        width: 200px;
        height: 100px;
        background: red;
    }

shape-circle

    #circle {
        width: 100px;
        height: 100px;
        background: red;
        border-radius: 50%
    }

shape-oval

    #oval {
        width: 200px;
        height: 100px;
        background: red;
        border-radius: 100px / 50px;
    }

shape-cone

    #cone {
        width: 0;
        height: 0;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
        border-top: 100px solid red;
        border-radius: 50%;
    }

shape-trapezoid

    #trapezoid {
        border-bottom: 100px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        height: 0;
        width: 100px;
    }

shape-parallelogram

    #parallelogram {
        width: 150px;
        height: 100px;
        transform: skew(20deg);
        background: red;
    }

shape-pentagon

    #pentagon {
        position: relative;
        width: 54px;
        box-sizing: content-box;
        border-width: 50px 18px 0;
        border-style: solid;
        border-color: red transparent;
    }
    
    #pentagon:before {
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        top: -85px;
        left: -18px;
        border-width: 0 45px 35px;
        border-style: solid;
        border-color: transparent transparent red;
    }

shape-hexagon

    #hexagon {
        width: 100px;
        height: 55px;
        background: red;
        position: relative;
    }
    #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 red;
    }
    #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 red;
    }

shape-octagon

    #octagon {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
    }
    #octagon:before {
        content: "";
        width: 100px;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 29px solid red;
        border-left: 29px solid #eee;
        border-right: 29px solid #eee;
    }
    #octagon:after {
        content: "";
        width: 100px;
        height: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 29px solid red;
        border-left: 29px solid #eee;
        border-right: 29px solid #eee;
    }

shape-triangle-up

    #triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }

shape-triangle-down

    #triangle-down {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }

shape-triangle-left

    #triangle-left {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }

shape-triangle-right

    #triangle-right {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-left: 100px solid red;
        border-bottom: 50px solid transparent;
    }

shape-triangle-top-left

    #triangle-topleft {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }

shape-triangle-top-right

    #triangle-topright {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
    }

shape-triangle-bottom-left

    #triangle-bottomleft {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }

shape-triangle-bottom-right

    #triangle-bottomright {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }

shape-curve-arrow

    #curvedarrow {
        position: relative;
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-right: 9px solid red;
        transform: rotate(10deg);
    }
    
    #curvedarrow:after {
        content: "";
        position: absolute;
        border: 0 solid transparent;
        border-top: 3px solid red;
        border-radius: 20px 0 0 0;
        top: -12px;
        left: -9px;
        width: 12px;
        height: 12px;
        transform: rotate(45deg);
    }

shape-star-5

    margin: 50px 0;
        position: relative;
        display: block;
        color: red;
        width: 0px;
        height: 0px;
        border-right: 100px solid transparent;
        border-bottom: 70px solid red;
        border-left: 100px solid transparent;
        transform: rotate(35deg);
    }
    #star-five:before {
        border-bottom: 80px solid red;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        position: absolute;
        height: 0;
        width: 0;
        top: -45px;
        left: -65px;
        display: block;
        content: '';
        transform: rotate(-35deg);
    }
    #star-five:after {
        position: absolute;
        display: block;
        color: red;
        top: 3px;
        left: -105px;
        width: 0px;
        height: 0px;
        border-right: 100px solid transparent;
        border-bottom: 70px solid red;
        border-left: 100px solid transparent;
        transform: rotate(-70deg);
        content: '';
    }

shape-star-6

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

shape-burst-12

    #burst-12 {
        background: red;
        width: 80px;
        height: 80px;
        position: relative;
        text-align: center;
    }
    #burst-12:before,
    #burst-12:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 80px;
        width: 80px;
        background: red;
    }
    #burst-12:before {
        transform: rotate(30deg);
    }
    #burst-12:after {
        transform: rotate(60deg);
    }

shape-burst-8

    #burst-8 {
        background: red;
        width: 80px;
        height: 80px;
        position: relative;
        text-align: center;
        transform: rotate(20deg);
    }
    #burst-8:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 80px;
        width: 80px;
        background: red;
        transform: rotate(135deg);
    }

shape-heart

    #heart {
        position: relative;
        width: 100px;
        height: 90px;
    }
    #heart:before,
    #heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        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%;
    }

shape-infinity

    #infinity {
        position: relative;
        width: 212px;
        height: 100px;
        box-sizing: content-box;
    }
    #infinity:before,
    #infinity:after {
        content: "";
        box-sizing: content-box;
        position: absolute;
        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);
    }

shape-diamond-square

    #diamond-square {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-bottom-color: red;
        position: relative;
        top: -50px;
    }
    #diamond-square:after {
        content: '';
        position: absolute;
        left: -50px;
        top: 50px;
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-top-color: red;
    }

shape-diamond-narrow

    #diamond-narrow {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-bottom: 70px solid red;
        position: relative;
        top: -50px;
    }
    #diamond-narrow:after {
        content: '';
        position: absolute;
        left: -50px;
        top: 70px;
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-top: 70px solid red;
    }

shape-diamond-shield

    #diamond-shield {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-bottom: 20px solid red;
        position: relative;
        top: -50px;
    }
    #diamond-shield:after {
        content: '';
        position: absolute;
        left: -50px;
        top: 20px;
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-top: 70px solid red;
    }

shape-diamond-cut

    #cut-diamond {
        border-style: solid;
        border-color: transparent transparent red transparent;
        border-width: 0 25px 25px 25px;
        height: 0;
        width: 50px;
        box-sizing: content-box;
        position: relative;
        margin: 20px 0 50px 0;
    }
    #cut-diamond:after {
        content: "";
        position: absolute;
        top: 25px;
        left: -25px;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: red transparent transparent transparent;
        border-width: 70px 50px 0 50px;
    }

shape-egg

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

shape-pacman

    #pacman {
        width: 0px;
        height: 0px;
        border-right: 60px solid transparent;
        border-top: 60px solid red;
        border-left: 60px solid red;
        border-bottom: 60px solid red;
        border-top-left-radius: 60px;
        border-top-right-radius: 60px;
        border-bottom-left-radius: 60px;
        border-bottom-right-radius: 60px;
    }

shape-talk-bubble

    #talkbubble {
        width: 120px;
        height: 80px;
        background: red;
        position: relative;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    #talkbubble:before {
        content: "";
        position: absolute;
        right: 100%;
        top: 26px;
        width: 0;
        height: 0;
        border-top: 13px solid transparent;
        border-right: 26px solid red;
        border-bottom: 13px solid transparent;
    }

shape-yin-yang

    #yin-yang {
        width: 96px;
        box-sizing: content-box;
        height: 48px;
        background: #eee;
        border-color: red;
        border-style: solid;
        border-width: 2px 2px 50px 2px;
        border-radius: 100%;
        position: relative;
    }
    #yin-yang:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #eee;
        border: 18px solid red;
        border-radius: 100%;
        width: 12px;
        height: 12px;
        box-sizing: content-box;
    }
    #yin-yang:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: red;
        border: 18px solid #eee;
        border-radius: 100%;
        width: 12px;
        height: 12px;
        box-sizing: content-box;
    }

shape-badge-ribbon

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

shape-space-invader

    #space-invader {
        display:flex;
        justify-content: center;
        align-items: center;
        width: 12em;
        height: 8em;
    }
    
    #space-invader::before {
        content: '';
        display: inline-block;
        width: 1em;
        height: 1em;
        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;
    }

shape-tv

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

shape-mangnifying-glass

    #magnifying-glass {
        font-size: 10em;
        display: inline-block;
        width: 0.4em;
        box-sizing: content-box;
        height: 0.4em;
        border: 0.1em solid red;
        position: relative;
        border-radius: 0.35em;
    }
    #magnifying-glass:before {
        content: "";
        display: inline-block;
        position: absolute;
        right: -0.25em;
        bottom: -0.1em;
        border-width: 0;
        background: red;
        width: 0.35em;
        height: 0.08em;
        transform: rotate(45deg);
    }

shape-facebook

    #facebook-icon {
        background: red;
        text-indent: -999em;
        width: 100px;
        height: 110px;
        box-sizing: content-box;
        border-radius: 5px;
        position: relative;
        overflow: hidden;
        border: 15px solid red;
        border-bottom: 0;
    }
    #facebook-icon:before {
        content: "/20";
        position: absolute;
        background: red;
        width: 40px;
        height: 90px;
        bottom: -30px;
        right: -37px;
        border: 20px solid #eee;
        border-radius: 25px;
        box-sizing: content-box;
    }
    #facebook-icon:after {
        content: "/20";
        position: absolute;
        width: 55px;
        top: 50px;
        height: 20px;
        background: #eee;
        right: 5px;
        box-sizing: content-box;
    }

shape-moon

    #moon {
        width: 10em;
        height: 10em;
    }
    #moon::before {
        content: '';
        display: inline-block;
        width: 8em;
        height: 8em;
        border-radius: 50%;
        box-shadow: 1em 1em 0 0 red;
    }

shape-flag

    #flag {
        width: 110px;
        height: 56px;
        box-sizing: content-box;
        padding-top: 15px;
        position: relative;
        background: red;
        color: white;
        font-size: 11px;
        letter-spacing: 0.2em;
        text-align: center;
        text-transform: uppercase;
    }
    #flag:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-bottom: 13px solid #eee;
        border-left: 55px solid transparent;
        border-right: 55px solid transparent;
    }

shape-cross

    #cross {
        height: 100px;
        width: 100px;
        position: relative;
    }
    
    #cross:before,
    #cross:after {
        content: "";
        position: absolute;
        background: red;
    }
    
    #cross:before {
        top: 0;
        left: 40px;
        width: 20px;
        height: 100px;
    }
    
    #cross:after {
        top: 40px;
        left: 0px;
        width: 100px;
        height: 20px;
    }

shape-base

    #base {
        background: red;
        display: inline-block;
        height: 55px;
        margin-left: 20px;
        margin-top: 55px;
        position: relative;
        width: 100px;
    }
    #base:before {
        border-bottom: 35px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        content: "";
        height: 0;
        left: 0;
        position: absolute;
        top: -35px;
        width: 0;
    }

shape-pointer

    #pointer {
        width: 200px;
        height: 40px;
        position: relative;
        background: red;
    }
    #pointer:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 20px solid white;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }
    #pointer:before {
        content: "";
        position: absolute;
        right: -20px;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 20px solid red;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }

shape-lock

    #lock {
        font-size: 8px;
        position: relative;
        width: 18em;
        height: 13em;
        border-radius: 2em;
        top: 10em;
        box-sizing: border-box;
        border: 3.5em solid red;
        border-right-width: 7.5em;
        border-left-width: 7.5em;
        margin: 0 0 6rem 0;
    }
    #lock:before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        border: 2.5em solid red;
        width: 14em;
        height: 12em;
        left: 50%;
        margin-left: -7em;
        top: -12em;
        border-top-left-radius: 7em;
        border-top-right-radius: 7em;
    }
    #lock:after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        border: 1em solid ted;
        width: 5em;
        height: 8em;
        border-radius: 2.5em;
        left: 50%;
        top: -1em;
        margin-left: -2.5em;
    }

演示地址

CSS画各种图形（五角星、吃豆人、太极图等）

主要方法

目录

图形列表

shape-square

shape-rctangle

shape-circle

shape-oval

shape-cone

shape-trapezoid

shape-parallelogram

shape-pentagon

shape-hexagon

shape-octagon

shape-triangle-up

shape-triangle-down

shape-triangle-left

shape-triangle-right

shape-triangle-top-left

shape-triangle-top-right

shape-triangle-bottom-left

shape-triangle-bottom-right

shape-curve-arrow

shape-star-5

shape-star-6

shape-burst-12

shape-burst-8

shape-heart

shape-infinity

shape-diamond-square

shape-diamond-narrow

shape-diamond-shield

shape-diamond-cut

shape-egg

shape-pacman

shape-talk-bubble

shape-yin-yang

shape-badge-ribbon

shape-space-invader

shape-tv

shape-mangnifying-glass

shape-facebook

shape-moon

shape-flag

shape-cross

shape-base

shape-pointer

shape-lock