css 图形绘制

作者: 高梅飞花 | 来源:发表于2019-05-20 13:53 被阅读0次

mxgraph
css 图形绘制
css图形绘制合集（纯CSS外加一个div标签实现）
CSS3绘制图形基本原理
CSS-绘制各种基本图形
css绘制的图形
CSS 绘制特殊图形
CSS 绘制特殊图形
css绘制各种图形
常用CSS图形绘制

尾巴

            .size{
                border: 0 solid transparent;
                width: 100px;
                height: 100px;
            }
            .tail-left-bttom{
                border-top: 30px solid #669;
                -moz-border-radius: 100px 0 0 0;
                -webkit-border-radius: 100px 0 0 0;
                border-radius: 100px 0 0 0;
                
            }

            .tail-right-bttom {
                border-top: 30px solid #669;
                -moz-border-radius: 0 100px 0 0;
                -webkit-border-radius: 0 100px 0 0;
                border-radius: 0 100px 0 0;
            }

            .tail-right-top {
                border-bottom: 30px solid #669;
                -moz-border-radius: 0 0 100px 0;
                -webkit-border-radius: 0 0 100px 0;
                border-radius: 0 0 100px 0;
            }

            .tail-left-top {
                border-bottom: 30px solid #669;
                -moz-border-radius: 0 0 0 100px;
                -webkit-border-radius: 0 0 0 100px;
                border-radius: 0 0 0 100px;
            }

爱心

            .heart {
                width: 160px;
                height: 200px;
            }
            .heart-color:after,.heart-color:before{
                background:#ff7979;
            }
            .heart:before {
                content: " ";
                border: 0 solid transparent;
                -moz-border-radius: 100px;
                -webkit-border-radius: 100px;
                border-radius: 100px 100px 0 0;
                width: 80px;
                height: 120px;
                -moz-transform: rotate(-45deg) translate(20px, 20px);
                -ms-transform: rotate(-45deg) translate(20px, 20px);
                -o-transform: rotate(-45deg) translate(20px, 20px);
                -webkit-transform: rotate(-45deg) translate(20px, 20px);
                display: block;
            }

            .heart:after {
                content: " ";
                border: 0 solid transparent;
                -moz-border-radius: 100px;
                -webkit-border-radius: 100px;
                border-radius: 100px 100px 0 0;
                width: 80px;
                height: 120px;
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -webkit-transform: rotate(45deg) translate(-45px, -125px);
                display: block;
            }

弯尾箭头

            .curved-arrow {
                position: relative;
                width: 0;
                height: 0;
                border-top: 9px solid transparent;
                border-right: 9px solid red;
                -webkit-transform: rotate(10deg);
                -moz-transform: rotate(10deg);
                -ms-transform: rotate(10deg);
                -o-transform: rotate(10deg);
            }

            .curved-arrow: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;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
            }

五角星

            .star-five {
                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;
                -moz-transform: rotate(35deg);
                -webkit-transform: rotate(35deg);
                -ms-transform: rotate(35deg);
                -o-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: '';
                -webkit-transform: rotate(-35deg);
                -moz-transform: rotate(-35deg);
                -ms-transform: rotate(-35deg);
                -o-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;
                -webkit-transform: rotate(-70deg);
                -moz-transform: rotate(-70deg);
                -ms-transform: rotate(-70deg);
                -o-transform: rotate(-70deg);
                content: '';
            }